React
タイプが苦手な単語をタイピング練習できるツールを作った
2022-03-13最近椅子を変えてキーボードに添える手の位置が変わったのか、タイピングしづらいと感じることが増えました。 昔は TyepWell という知る限りでは一番良いタイピング練習ソフトを使っていましたが Mac…
お手軽用 React Context で State 管理のテンプレート
2022-02-24ミニマムだけど使いやすい(と思ってる)テンプレートです。 createContext 周りを書くのが地味にだるいので使っています。 DEMO: minimum-use-context-config - CodeSandbox コード 使い方 部分的な Config Hook…
React Component から HTML コードを取得する
2022-01-12コード React コンポーネントからレンダリングされる HTML コードを文字列として返す関数です。 CodeSandbox
すべてのキーの onDown, onUp イベントを取る React Hooks
2021-10-18ピアノツールを作ってたら押すたびに 1 度だけ発火するイベントハンドラが欲しくなったので作りました。 その際にキーイベントに関する他パターンのカスタムフックを作ってみました。 を拡張します。 (…
ブラウザ javascript 側で global ip を取得する
2021-07-06CSR (Client side rendering) でユーザの public ip を取得する方法です。 ipify を使う ipify - A Simple Public IP Address API ReactHooks の例 Code: tools/global-ip…
component から props の型を取得する
2021-07-05Storybook で props 型が必要だけど export したくなかったので。 方法 1 方法 2(古い)
React で特定の props を固定した特化コンポーネントを定義する
2021-01-19React で特定の props を固定した特化コンポーネントを定義する方法をいくつかまとめました。 DEMO です。 react-set-props - CodeSandbox 以下の という自作コンポーネントと というライブラリのコンポーネントを例に使います。 Star…
React で URL props が変わったら fade アニメーションで 背景を変える
2020-12-29props で指定された URL が変わったら フェードアウト し、 新しい URL 画像で フェードイン しながら表示するコンポーネントを作りました。 を使います。 デモ コード 部分の説明。 変更された際 になり Exit アニメーション(fade out…
React と display grid でメモリ付き定規
2020-10-30メモリ付きの定規、ルーラーコンポーネントのサンプルです。 react-memory-component コード ruler-with-memory - CodeSandbox ミソ ブロック部分とメモリ部分を 0.…
React で canvas から画像生成する最小コード
2020-05-25この記事では React (と TypeScript で) canvas から画像生成する方法を紹介します。 文字描画や色変更をサンプルに説明していきます。 React で Canvas を使うベースのコード useEffect…
children を持つ Component を normal function で書くときの型定義
2020-02-07この記事では children を持つ Component を function で書くときの型定義する方法を説明します。 書き方 を使うことで書けます。 Sample PropsWithChildren - CodeSandbox それぞれの書き方 関連 Tips Props…
【ボツネタ】GitHub Actions の URL 1 つからバッジを生成するツール作った
2020-02-03この記事では GitHub Actions の URL 1 つからバッジを生成するツールを作ったので紹介します。 するつもりだったのですが、気づいたら公式で発行するするボタンができてました。 github-actions-qawolf-badge.png…
5層 ReactComponent と TypeScript でカウンター書いてみる
2020-01-21経年劣化に耐える ReactComponent の書き方 - Qiita が良さそうだったので TypeScript で書く場合を試してみた。 コード CodeSandbox 気になる部分 StyledComponent で既存 Component を Wrap…
はやくもブログを Hexo から Gatsby に切り替えた
2019-03-06移行した理由 React 使えそうなので Gatsby に移行しました。 Before After さっぱりしてしまいましたがカスタマイズ前なので OK。 いじっていきたい部分 Gatsby は GraphQL…