White Box技術部

WEB開発のあれこれ(と何か)

React

【React】Quillを表示するカスタムフックと、それをReact Hook Formで使うサンプル

QuillというWYSIWYGエディタをReact Hook Formで使うメモです。 主要ライブラリ 動作時のライブラリバージョンは以下になります。 dependencies "react": "18.2.0" "react-hook-form": "7.44.3" "quill": "1.3.7" "react-quilljs": "1.3.3" devDependencies …

ReactとSassそれぞれのSP判定について

レスポンシブ対応したサイトを作成する場合、PCとSPでスタイルを切り替えたり、表示内容を変えたりすると思うのですが、 私がやっているTSX側とSCSS側の切り替え方法について記載します。 React側の準備 react-responsiveを使って、指定サイズ以下になった場…

【React】未編集時に確認ダイアログを出すカスタムフック

『Formデータに編集済みデータがあれば、ブラウザの戻るが実行された場合に確認ダイアログを出す』というよくあるやつを出したくなって調べたところ、 この記事にあたりました。 わかりやすくていい記事だったので、やりたい人はこれを見てくださいで良いの…

Next.jsでLayzr.jsを使って画像読み込みをする方法

既存サイトを書き直していたら、layzr.jsの扱いにハマったので。 next/imageを使えというのは無しで。 結論:useEffectを使えばOK libs/layzr.ts import Layzr from 'layzr.js'; export default function LayzrConfig() { const instance = Layzr({ threshol…

TypeScriptでwindowにプロパティを追加するいくつかの方法

DjangoのテンプレートにReactを埋め込むとかいう、妙なことをしているときに、とある理由からwindowにReactやらを追加しておく必要ができたのですが、TypeScriptだとそのまま突っ込むと型の関係で怒られました。 調べてみるとほぼこのタイトルの記事があった…