react

React MUIのDrawerでIconを文字列で指定したい

ReactのUIフレームワーク「MUI」では、アイコンをコンポーネントで指定します。 <InboxIcon />   DBから取得したデータを元にメニューを作ったりアイコンを表示するにはコンポーネントでは動的に変更できません。 そこで文字列で指定する方法を記載します。 Icon fontを追加 index.html等のルートのheadタグ内でIconFontを読み込みます。 […]

[react-slick]Reactでカルーセルを実装するプラグイン

Reactで画像がスライドして次々と表示されるカルーセルを実装するために便利なプラグイン「react-slick」の紹介です。 react-slickのサンプル こんなやつです。 ここが使いやすい 1画面に3つずつスライドするような場合、slideToShowに3を指定するだけで実現できます。 Reactからしたらカルーセルで表示したい画像はただ配列で持ってるだけです。 イマイチなプラグインだと、 […]

ReactでSVG形式をクリック可能な要素として読み込む方法

Create React Appで作成したアプリケーションでSVG形式のロゴ等をクリック可能な要素として読み込む方法です。 HTMLのimgタグではonClick属性は無いため、クリック可能な要素として読み込むことは出来ません。 ReactComponentとして読み込むことでクリック可能な要素として読み込みます。