React-hook-form

react-hook-form

製品情報

お気に入り

公開チャット

サポートプラン

現在利用可能なOSSプランはありません

リポジトリのプロバイダーまたは寄稿者である場合は、OSSプランの追加を開始できます。

OSSプランを追加する
Learn more here

このOSSプランをお探しの場合は、お問い合わせください

製品詳細

React Hooks for form state management and validation (Web + React Native)
[![npm downloads](https://img.shields.io/npm/dm/react-hook-form.svg?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form) [![npm](https://img.shields.io/npm/dt/react-hook-form.svg?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form) [![npm](https://img.shields.io/npm/l/react-hook-form?style=for-the-badge)](https://github.com/react-hook-form/react-hook-form/blob/master/LICENSE) [![Discord](https://img.shields.io/discord/754891658327359538.svg?style=for-the-badge&label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/yYv7GZ8)

Get started | API | Form Builder | FAQs | Examples

Features

Install

npm install react-hook-form

Quickstart

import { useForm } from 'react-hook-form';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

Sponsors

Thanks go to these kind and lovely sponsors!

Past sponsors

Backers

Thanks go to all our backers! [Become a backer].

Contributors

Thanks go to these wonderful people! [Become a contributor].

Stay in touch

  • ビジネスおよび開発者向けの実用的な最新情報をご希望ですか?
  • ソースコードプロジェクトに対するPieceXコミュニティのニーズについてご提供します。
  • PieceXの最新の無料コミュニティコードプロジェクトをいち早くお知らせします。
PieceX Logo