Hatena Blog Tags
はてなブログ トップ
React Hook Form
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

React Hook Form

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
toggle Engineer Blog•4ヶ月前

Reactデザインパターン：Compound Component

こんにちは。トグルホールディングスプロダクトユニットのラファエルです。 トグルホールディングスエンジニアアドベントカレンダーの22日目の記事です！ はじめに React デザインパターンは、React 開発におけるよくある問題に対する、実績のある解決策です。これらは、問題を効率的に解決しつつ、コードをきれいで保守しやすい状態に保つのに役立ちます。React が進化するにつれて、新しい課題に対応し、より良いアプリケーションを構築するために、新しいデザインパターンが登場しています。 今回は、開発者が直面しがちな共通の課題、大きなコンポーネントの扱い方についてお話しします。 課題 例えば、ユーザーフ…

#React Hook Form#react#typescipt

関連ブログ

Mirrativ Tech Blog•1年前

サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術

こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登録した情報や配信の履歴を管理する社内向けのシステムが存在しています。 特に管理システムのフロントエンドにおいては、その特性上入力フォームの実装がその大半を占めています。 日々の機能開発においては、そうした管理システムに実装された入力フォームの新規実装や機能拡張が行われて…

#TypeScript#JavaScript#Zod#React Hook Form
Michi's Tech Blog•2年前

Zodに入門してみる

こんにちは！ スマレジ テックファームのMichiです！ 今回の記事では、ZodというTypeScriptのライブラリに入門してみます。 Zodとは？ 使ってみる スキーマとバリデーションの設計 TypeScriptの型生成 React Hook Formとの連携 まとめ Zodとは？ 公式ドキュメントの説明が一番わかりやすかったので、和訳したものをそのまま転載します。 ZodはTypeScriptでスキーマ定義・バリデーション設定を行うライブラリです。 ここでいう「スキーマ」という用語は、単純な文字列から複雑なネストされたオブジェクトまで、あらゆるデータ型を広く指します。 Zodは可能な限り…

#TypeScript#Zod#React Hook Form
White Box技術部•2年前

【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 "@types/node": "20.4.10" "@types/quill": "2.0.10" "@types/react": "18.2.20" "@types/react-dom": "18.2.7" カス…

#Quill#React Hook Form#TypeScript#React.js
徒然かえる日記•2年前

Next.js + ReactHookForm (RHF) + Zod + MUI でバリデーションの効く UI を作る

フレームワークおまかせバリバリのバリデーションが効く UI を作ります！ (ただし、テキスト入力だけ…その他は気が向いたら…) きれいな設計としては以下参考文献がおすすめ。この文書を作る際にかなり参照させていただきました！良テキスト非常に感謝です。 ラクス斉藤様著：React Hook Form v7 + MUI v5 + zod v3を使ったコンポーネント実装例 概要 利用 OSS のバージョン インストール バリデーション実現！ コンポーネント化 概要 RHF と MUI、Zod の組み合わせでの UI 作成を Next.js で実施しようとした際のポイントをまとめた とりあえず手っ取り早…

#Next.js#React Hook Form#Zod
バイセル Tech Blog•2年前

react-hook-formの最新機能！Formコンポーネントの紹介

はじめに こんにちは！ 開発 2 部の小林です。 バイセルでは最新の機能を積極的に使える環境が整っており、各プロジェクトのエンジニアが日々最新の技術を調査し、社内で共有を行なっています。 今回は技術調査の一環として、react-hook-form(以後 RHF とする)の最新バージョンで追加予定の Form コンポーネント(執筆時点ではプレリリース)の調査を行いましたので内容を共有します。 はじめに 対象読者 Form コンポーネントとは RFC 動機 プログレッシブエンハンスメントとは デメリット・制限 各 API の使い方 props control children render onS…

#React Hook Form#react#frontend
RAKUS Developers Blog | ラクス エンジニアブログ•2年前

モダンフロントエンドで始めるつらくないReactディレクトリ構成

はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト！ TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を持ってオススメできます！ さて今回は、モダンなフロントエンド技術を採用したうえで、極力シンプルで開発体験を損なわないようなディレクトリ構成を考えてみたので共有したく記事にしました。現在実際に運用しているのですが、今のところ大きな問題も無くチームからの不満も上がっていません。しかし、個人的に微妙な部分もあるのでそちらの紹介も行いたいと…

#React Hook Form#react#Recoil#Material UI#frontend
バイセル Tech Blog•2年前

React Hook Form + Zodにおける型不整合の解消

⚠️ 記事の内容が古くなっているのでご注意ください。 v7.44.0 より、TTransformedValues を設定できるようになったため、本記事で紹介しているユーティリティーは非公開としました。 はじめに こんにちは！ テクノロジー戦略本部 開発二部の金子です。 自分が担当するプロジェクトでは、React Hook Form (以後RHFとする) と Zod を用いてフォームの実装をしています。 この組み合わせは強力ですが、Zod スキーマから生成される型を useForm の型引数へ設定する際に、様々な型不整合が起きました。 本記事では、上記を解消するためのユーティリティーを公開したの…

#react#Zod#React Hook Form#react-hook-form
White Box技術部•2年前

React Hook Formで複数項目間のバリデーション（相関チェック）

相関チェックって言葉、そういえばもう全然聞かないなーとは思いつつ、 React Hook Formで、複数項目をまたぐ入力値のチェックを実装したので知見を残しておきます。 ↓こういうやつ 手順 ここでは郵便番号のように情報としては1つのものを、複数の入力項目で入力する場合を例にします。 また、手順は相関チェックをする場合に注意する箇所に絞って記載しています。 1. Formの型定義 分割した項目に対応した型（Zipcode）を定義し、それをReact Hook Formで扱うForm項目の型に設定します。 type Zipcode = { zip1: string; zip2: string;…

#React Hook Form#TypeScript