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