軽量なグローバル状態管理ライブラリ「zustand」
はじめに SWRやTanstack Queryといったライブラリが現れ、サーバーのデータをクライアントで管理することが少なくなり、グローバルでの状態管理も少なくなりました。 ただそれでも、モーダルの開閉、トースターの表示、ダークモードなど、グローバルで管理したい状態は、まだまだ多くあると思います。 Reactは、useContext(以下 Context)を用いてグローバルな状態管理を実現できますが、状態が少ないうちは良いのですが、それが多くなってきた時に、Providerタワー(参考: https://zenn.dev/uhyo/articles/provider-tower-to-recoil)が建設され、Provider同士の依存関係を管理するコストが高まったり、コード量が多かったりなど、規模が大きくなると気になる点がいくつかあると思います。(その他にもパフォーマンスが良くないと言わ
React ＋ MUI: 数値入力とマスク入力 に react-number-format が、かなりオススメ！
Reactで MUI(v5) + React-hook-form + yup で入力フォームを作成しています。 今回は 3桁区切りや小数点以下の入力をサポートした数値入力用のコンポーネントと、マスク入力用のコンポーネントが必要になったのですが、MUI には 数値入力用のコンポーネントやマスク入力コンポーネントがありません。 そこで react-number-format ライブラリを試してみたのですが、かなりオススメだったので紹介したいと思います。 数値入力用、マスク入力用のコンポーネントを扱うライブラリ 数値入力用のコンポーネント、マスク入力用のコンポーネント を扱っているライブラリとして、react-number-format のほかに react-imask があります。 たぶん他にもいいライブラリがあると思いますが、今回はこの2つから選びました。 react-imask npm t
React＋MUI v5 の 入力フォーム用のライブラリは React Hook Form の 一択
今回は 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つのライブラリと比較して、レンダリングが多くパフォーマンスに劣るようです。 現在あえて選択することはないかと思うのでパスします。 パフ
React Final Form
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.
GitHub - contiamo/restful-react: A consistent, declarative way of interacting with RESTful backends, featuring code-generation from Swagger and OpenAPI specs 🔥
⚠️ restful-react has been deprecated: We are focusing on a new open api generator that generates react-query components: https://github.com/fabien0102/openapi-codegen ⚠️ Building React apps that interact with a RESTful API presents a set of questions, challenges and potential gotchas. This project aims to remove such pitfalls, and provide a pleasant developer experience when crafting such applicat
ReactのUIメモ - Qiita
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 サンプル 地図コンポーネントがあるのがめずらしいです。 メーター
ReactPWA · An extendable boilerplate built on top of PawJS
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ページを開く
GitHub - pdcamargo/dreampact
SVGR - Transforms SVG into React Components. - SVGR
GitHub - JakeSidSmith/react-fastclick: Fast Touch Events for React
GitHub - react-hook-form/react-hook-form: 📋 React Hooks for form state management and validation (Web + React Native)
rc-notification
GitHub - pmmmwh/react-refresh-webpack-plugin: A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
react-number-format
react-hook-form/docs/README.ja-JP.md at master · react-hook-form/react-hook-form
5 Ways to animate a React app in 2019.
Laco (Intro)
GitHub - pinterest/gestalt: A set of React UI components that supports Pinterest’s design language
GitHub - stereobooster/react-ideal-image: 🖼️ An Almost Ideal React Image Component
GitHub - civiccc/react-waypoint: A React component to execute a function whenever you scroll to an element.
