React のカスタムフックのテストでハマったので備忘録として書きます。 現象 以下のようなオブジェクトの配列の state とそれを更新する関数を持つカスタムフックを作成しました。 export function useCheckState() { const [data, setData] = useState([ { id: 'foo', isChecked: t… read more

Next.js (React)でモーダルやページ内でステップを表示する際に別の内容を表示しようとする際に、リロードやブラウザバックにより、その状態を保持したり、ユーザが思ったような挙動をしたい場合、location.replace メソッドを使って、ページ遷移をせず、その状態をブラウザに保持することができます。 例えば以下のようにモーダルが開いているような UI の場合、通常は js 内の変数(s… read more

React TypeScript Cheatsheet を見ていたら、React.FC を非推奨してたので、理由を少し調べてみた。 主な理由はこの CRA の pr に書いてあった。 https://github.com/facebook/create-react-app/pull/8177 マイナス面として 暗黙的な children の定義してしまう React.FC でコンポーネントを… read more

Next.js(React)で多言語対応をしたい場合、isaachinman/next-i18nextなどのライブラリはありますが、ちょっと多機能すぎて、ブラックボックスな部分が多いと感じたので、簡単に自作してみることにしました。 準備 とりあえず Next.js の環境を用意します。 $ npx create-next-app demo --use-npm --example "&lt… read more

React で入力されたテキストに URL が含まれている場合に、出力する側でその URL を判定し、自動的に a タグを適応したい。 利用するライブラリは以下の 2 つ Anchorme js-xss ライブラリ Anchorme テキストに含まれている URL ライクな文字列を自動的に a タグに変換してくれる。 import anchorme from 'anchorme&#39… read more

TypeScript で React の開発をしているときにハマった箇所のメモ。 React のイベントの Props 定義 クリックイベントはReact.MouseEvent、選択リスト/テキストのインプットはReact.ChangeEventが型になる。 export interface IMyComponentProps { prop1: string; prop2: (event:… read more