React
すべてのキーの 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…