あのぞんブログ

React

ブラウザ javascript 側で global ip を取得する

2021-07-06

CSR (Client side rendering) でユーザの public ip を取得する方法です。 ipify を使う ipify - A Simple Public IP Address API ReactHooks の例 Code: tools/global-ip…

component から props の型を取得する

2021-07-05

Storybook で props 型が必要だけど export したくなかったので。 方法 1 方法 2(古い)

React で特定の props を固定した特化コンポーネントを定義する

2021-01-19

React で特定の props を固定した特化コンポーネントを定義する方法をいくつかまとめました。 DEMO です。 react-set-props - CodeSandbox 以下の という自作コンポーネントと というライブラリのコンポーネントを例に使います。 Star…

React で URL props が変わったら fade アニメーションで 背景を変える

2020-12-29

props で指定された 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…

© 2021 あのぞんびより All Rights Reserved