- 2021.10.25
- react,
React MUIのDrawerでIconを文字列で指定したい
ReactのUIフレームワーク「MUI」では、アイコンをコンポーネントで指定します。 <InboxIcon /> DBから取得したデータを元にメニューを作ったりアイコンを表示するにはコンポーネントでは動的に変更できません。 そこで文字列で指定する方法を記載します。 Icon fontを追加 index.html等のルートのheadタグ内でIconFontを読み込みます。 […]
react
- 2020.12.04
- react,
[react-slick]Reactでカルーセルを実装するプラグイン
Reactで画像がスライドして次々と表示されるカルーセルを実装するために便利なプラグイン「react-slick」の紹介です。 react-slickのサンプル こんなやつです。 ここが使いやすい 1画面に3つずつスライドするような場合、slideToShowに3を指定するだけで実現できます。 Reactからしたらカルーセルで表示したい画像はただ配列で持ってるだけです。 イマイチなプラグインだと、 […]
- 2020.11.08
- material-ui, react,
yarn add @material-ui/labを実行するとThere appears to be trouble with your network connection. Retrying…
@material-ui/labをyarnでインストールしようとすると、There appears to be trouble with your network connection. Retrying…と4回表示された後にエラーが表示されます。
- 2020.10.16
- react,
Redux ToolkitでlocalStorageにデータを保存するには
Redux ToolkitでStoreブラウザのlocalStorageにデータを保存して永続化する方法です。 localStorageへの読み書きはライブラリ「redux-localstorage-simple」を使用します。
- 2020.09.22
- react,
ReactでSVG形式をクリック可能な要素として読み込む方法
Create React Appで作成したアプリケーションでSVG形式のロゴ等をクリック可能な要素として読み込む方法です。 HTMLのimgタグではonClick属性は無いため、クリック可能な要素として読み込むことは出来ません。 ReactComponentとして読み込むことでクリック可能な要素として読み込みます。
- 2020.09.20
- 2020.09.22
- react,
React Hooks useEffectが実行されずにnullになる
ReactのuseEffectを使ってAPIからデータを取得して直ぐに参照しようとすると、値が取得されておらずにnullになっていることがあります。 その原因と対処方法について記載します。
- 2020.08.21
- react, TypeScript,
[TypeScript] React Hookで型定義付きでカリー化する時の書き方
TypeScriptでReactを使う場合は型定義を記載しますが、カリー化する場合の型定義の仕方は少々分かりづらいです。
[Material-UI Pickers] date-fnsでカレンダーを日本語に設定する
Material-UI Pickersでdate-fnsを使用する場合のカレンダーを日本語に設定します。 date-fnsが公式で提供する日本語用のロケールを使ってMaterial-UI Pickersのロケールに設定します。 date-fnsの日本語用のロケール 以下をimportします。 import ja from "date-fns/locale/ja"; Material-UI Pick […]
- 2020.08.07
- react,
Material-UI PickerをTypeScriptでonChangeで型が一致しないとエラーになる場合の対応方法
Material-UIのDatePickerをTypeScriptで使用する時、公式のリファレンス通りに記述すると型不一致のエラーが発生します。