はじめに SWRやTanstack Queryといったライブラリが現れ、サーバーのデータをクライアントで管理することが少なくなり、グローバルでの状態管理も少なくなりました。 ただそれでも、モーダルの開閉、トースターの表示、ダークモードなど、グローバルで管理したい状態は、まだまだ多くあると思います。 Reactは、useContext(以下 Context)を用いてグローバルな状態管理を実現できますが、状態が少ないうちは良いのですが、それが多くなってきた時に、Providerタワー(参考: https://zenn.dev/uhyo/articles/provider-tower-to-recoil)が建設され、Provider同士の依存関係を管理するコストが高まったり、コード量が多かったりなど、規模が大きくなると気になる点がいくつかあると思います。(その他にもパフォーマンスが良くないと言わ
Reactで MUI(v5) + React-hook-form + yup で入力フォームを作成しています。 今回は 3桁区切りや小数点以下の入力をサポートした数値入力用のコンポーネントと、マスク入力用のコンポーネントが必要になったのですが、MUI には 数値入力用のコンポーネントやマスク入力コンポーネントがありません。 そこで react-number-format ライブラリを試してみたのですが、かなりオススメだったので紹介したいと思います。 数値入力用、マスク入力用のコンポーネントを扱うライブラリ 数値入力用のコンポーネント、マスク入力用のコンポーネント を扱っているライブラリとして、react-number-format のほかに react-imask があります。 たぶん他にもいいライブラリがあると思いますが、今回はこの2つから選びました。 react-imask npm t
今回は React(Typescript) + MUI(v5) の フォームライブラリをどれにしようか調査しました。 入力フォーム用のライブラリ React の入力フォーム用のライブラリをどれにするか？ 2022年03月22日時点で主要なもの、だいたい以下の3点のようです。 Formik React Final Form React Hook Form React Hook Form に決めた経緯 まずは npm trends で比較してみます。 人気順は Formik > React Hook Form > React Final Form のようです。 1. Formik npm trends を確認すると、一番人気があるライブラリです。 ただし、他の2つのライブラリと比較して、レンダリングが多くパフォーマンスに劣るようです。 現在あえて選択することはないかと思うのでパスします。 パフ
High performance subscription-based form state management for React From day one, Final Form and React Final Form were designed to be modular: you put the pieces together to build the form library that fits your requirements. Why should your users need to download complex code for handling arrays of fields when your signup form is just four fields? Only two peer dependencies: React and Final Form.
ReactのUIに関するメモです。ぼちぼち追加していきます。 Material-UI Material-UI メジャーどころ。Google、Materialが好きな、またはそれで問題ない場合には簡単に使えます。 TypeScriptで使うにはちょっと工夫要ります。 Semantic UI React Semantic UI React SemanticをRiactで扱うためのライブラリです。 ボタン1つとってみてもバリエーション多いです。 Grommet Grommet HP（Hewlett Packard）が公開している、業務アプリケーション向けに作成されたUIコンポーネント ラグジュアリーな雰囲気で、コンポーネントもかなり揃っています。 イメージは紫と○のようです。 github Components | Grommet サンプル 地図コンポーネントがあるのがめずらしいです。 メーター
React PWACreate Upgradable SEO Friendly Progressive web applications Lets get started with 3 simple steps:Cloning the repository:The command below will create a folder "react-pwa" relative to your current directorygit clone https://github.com/Atyantik/react-pwa.gitMoving to the repository & installing dependencies:cd react-pwa && npm installRunning the boilerplate:npm startVisit http://localhost:3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
