RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

React

react-infinite-scrollerを使ってFirestoreで無限スクロールを実装する

react-infinite-scrollerというライブラリを使ってみました。 github.com react-infinite-scroll-componentというライブラリもあるようですが、react-infinite-scrollerの方がGithubスターの数が多いので、今回はreact-infinite-scrollerを選びました。 GitH…

Next.js+TypeScriptでimportのaliasを設定するのが楽になっていた

importするときに何もしていないと以下のように相対パスで書きますが、階層が深くなると面倒です。 import { Button } from '../../components/Button それを以下のように書けるようにします。 import { Button } from '@/components/Button Next.jsでは以前…

Ant DesignのCalendar UIを使ってみた

カレンダーを実装しようと思って使ってみました。なかなかしっくり来るカレンダーライブラリがなかったですが、Ant Designのカレンダーがちょうどよかったです。 ant.design ただ、カレンダーに内容を表する場合に公式のExampleだと日付だけで判定していて、…

ReactでスライダーライブラリのSwiperを使う

jQueryを使っていた時によく使っていたスライダーのライブラリ「Swiper」をReactで使ってみました。 swiperjs.com 先日作った写真のポートフォリオサイトのモーダルで、画像をスライドさせるために使っています。 photo.mismith.me Reactで使う Reactでの導…

React Hook FormをUIライブラリのAnt Designで使う時にちょっと面倒だったのでメモ

Ant Designというよりは、Material UIや React-Selectなどフォーム関連の外部ライブラリを使う時にControllerというものを使う必要があるようです。 react-hook-form.com 最初は以下のように書いてましたが、refを認識しないようで、送信時のdataが空っぽで…

Create React Appの後にyarn startができない

久しぶりにCreate React Appで一からプロジェクトを作ってyarn startしてみるとエラーが出てしまう npx create-react-app myapp --template typescript yarn start TypeError: Cannot assign to read only property 'jsx' of object '#<Object>' 解決法 なにやらバー</object>…

react-hook-formのsetValue

react-hook-formを使っていて、後からvaluesの値を変えたい時。例えば、編集画面で、フォームの値を取得しそれをフォームにセットしたい時など。 setValueを使えばいける react-hook-form.com こんな感じ setValue([ { title: title }, { content: content },…

React+TypeScript+Firestore

初期手順をよく忘れて、都度調べてるのでメモ程度に Create React App npx create-react-app app-name --typescript Firebase toolを入れておく npm install -g firebase-tools ログインしておく firebase login Firebaseのプロジェクトを作成 コンソール画…