あのぞんブログ

React

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

React で特定の props を固定した特化コンポーネントを定義する方法をいくつかまとめました。 そのまま生の React で書く recompose/defaultProps を使う方法 styled-components を使う方法 DEMO です。 react-set…

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

props で指定された URL が変わったら フェードアウト し、 新しい URL 画像で フェードイン しながら表示するコンポーネントを作りました。 を使います。 デモ コード 呼び出す側のコード DiceBear Avatars…

React と display grid でメモリ付き定規

メモリ付きの定規、ルーラーコンポーネントのサンプルです。 react-memory-component コード ruler-with-memory - CodeSandbox ミソ ブロック部分とメモリ部分を 0.…

React で canvas から画像生成する最小コード

この記事では React (と TypeScript で) canvas から画像生成する方法を紹介します。 文字描画や色変更をサンプルに説明していきます。 React で Canvas を使うベースのコード 文字色や背景色を変えるサンプル React で Canvas…

children を持つ Component を normal function で書くときの型定義

この記事では children を持つ Component を function で書くときの型定義する方法を説明します。 書き方 を使うことで書けます。 Sample PropsWithChildren - CodeSandbox それぞれの書き方 関連 Tips Props…

【ボツネタ】GitHub Actions の URL 1 つからバッジを生成するツール作った

この記事では GitHub Actions の URL 1 つからバッジを生成するツールを作ったので紹介します。 するつもりだったのですが、気づいたら公式で発行するするボタンができてました。 github-actions-qawolf-badge.png…

5層 ReactComponent と TypeScript でカウンター書いてみる

経年劣化に耐える ReactComponent の書き方 - Qiita が良さそうだったので TypeScript で書く場合を試してみた。 コード CodeSandbox 気になる部分 StyledComponent で既存 Component を Wrap…

はやくもブログを Hexo から Gatsby に切り替えた

移行した理由 React 使えそうなので Gatsby に移行しました。 Before After さっぱりしてしまいましたがカスタマイズ前なので OK。 いじっていきたい部分 Gatsby は GraphQL…

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