<p>&lt;div align=&quot;center&quot;&gt;
        &lt;a href=&quot;<a href="https://react-hook-form.com">https://react-hook-form.com</a>&quot; title=&quot;React Hook Form - Simple React forms validation&quot;&gt;
            &lt;img src=&quot;<a href="https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/logo.png">https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/logo.png</a>&quot; alt=&quot;React Hook Form Logo - React hook custom hook for form validation&quot; /&gt;
        &lt;/a&gt;
&lt;/div&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p><a href="https://www.npmjs.com/package/react-hook-form"><img src="https://img.shields.io/npm/dm/react-hook-form.svg?style=for-the-badge" alt="npm downloads"></a>
<a href="https://www.npmjs.com/package/react-hook-form"><img src="https://img.shields.io/npm/dt/react-hook-form.svg?style=for-the-badge" alt="npm"></a>
<a href="https://github.com/react-hook-form/react-hook-form/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/react-hook-form?style=for-the-badge" alt="npm"></a>
<a href="https://discord.gg/yYv7GZ8"><img src="https://img.shields.io/discord/754891658327359538.svg?style=for-the-badge&label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" alt="Discord"></a></p>
<p>&lt;/div&gt;

</p>
<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://react-hook-form.com/get-started&quot;&gt;Get">https://react-hook-form.com/get-started&quot;&gt;Get</a> started&lt;/a&gt; | 
  &lt;a href=&quot;<a href="https://react-hook-form.com/api&quot;&gt;API&lt;/a">https://react-hook-form.com/api&quot;&gt;API&lt;/a</a>&gt; |
  &lt;a href=&quot;<a href="https://react-hook-form.com/form-builder&quot;&gt;Form">https://react-hook-form.com/form-builder&quot;&gt;Form</a> Builder&lt;/a&gt; |
  &lt;a href=&quot;<a href="https://react-hook-form.com/faqs&quot;&gt;FAQs&lt;/a">https://react-hook-form.com/faqs&quot;&gt;FAQs&lt;/a</a>&gt; |
  &lt;a href=&quot;<a href="https://github.com/bluebill1049/react-hook-form/tree/master/examples&quot;&gt;Examples&lt;/a">https://github.com/bluebill1049/react-hook-form/tree/master/examples&quot;&gt;Examples&lt;/a</a>&gt;
&lt;/p&gt;

</p>
<h3 id="features">Features</h3>
<ul>
<li>Built with performance, UX and DX in mind</li>
<li>Embraces native HTML form <a href="https://react-hook-form.com/get-started#Applyvalidation">validation</a></li>
<li>Out of the box integration with <a href="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5">UI libraries</a></li>
<li><a href="https://bundlephobia.com/result?p=react-hook-form@latest">Small size</a> and no <a href="./package.json">dependencies</a></li>
<li>Support <a href="https://github.com/jquense/yup">Yup</a>, <a href="https://github.com/colinhacks/zod">Zod</a>, <a href="https://github.com/ajv-validator/ajv">AJV</a>, <a href="https://github.com/ianstormtaylor/superstruct">Superstruct</a>, <a href="https://github.com/hapijs/joi">Joi</a> and <a href="https://github.com/react-hook-form/resolvers">others</a></li>
</ul>
<h3 id="install">Install</h3>
<pre><code>npm install react-hook-form
</code></pre>
<h3 id="quickstart">Quickstart</h3>
<pre><code class="language-jsx">import { useForm } from &#39;react-hook-form&#39;;
function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  return (
    &lt;form onSubmit={handleSubmit((data) =&gt; console.log(data))}&gt;
      &lt;input {...register(&#39;firstName&#39;)} /&gt;
      &lt;input {...register(&#39;lastName&#39;, { required: true })} /&gt;
      {errors.lastName &amp;&amp; &lt;p&gt;Last name is required.&lt;/p&gt;}
      &lt;input {...register(&#39;age&#39;, { pattern: /\d+/ })} /&gt;
      {errors.age &amp;&amp; &lt;p&gt;Please enter number for age.&lt;/p&gt;}
      &lt;input type=&quot;submit&quot; /&gt;
    &lt;/form&gt;
  );
}
</code></pre>
<p>&lt;a href=&quot;<a href="https://ui.dev/bytes/?r=bill">https://ui.dev/bytes/?r=bill</a>&quot;&gt;
  &lt;img src=&quot;<a href="https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/ads-1.jpeg">https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/ads-1.jpeg</a>&quot; /&gt;
&lt;/a&gt;

</p>
<h3 id="sponsors">Sponsors</h3>
<p>Thanks go to these kind and lovely sponsors!</p>
<p>&lt;a
    target = _blank
    href = &#39;https://wantedlyinc.com&#39;
/&gt;
&lt;img
        width = 94
        src = &#39;https://images.opencollective.com/wantedly/d94e44e/logo/256.png&#39;
    /&gt;
&lt;/a&gt;
&lt;a
    target = _blank
    href = &#39;https://graphcms.com&#39;
/&gt;
&lt;img
        width = 94
        src = &#39;https://avatars.githubusercontent.com/u/31031438&#39;
    /&gt;
&lt;/a&gt;
&lt;a
    target = _blank
    href = &#39;https://kanamekey.com&#39;
/&gt;
&lt;img
        width = 94
        src = &#39;https://images.opencollective.com/kaname/d15fd98/logo/256.png&#39;
    /&gt;
&lt;/a&gt;
&lt;a
    target = _blank
    href = &#39;https://formcarry.com/&#39;
/&gt;
&lt;img
        width = 94
        src = &#39;https://images.opencollective.com/formcarry/a40a4ea/logo/256.png&#39;
    /&gt;
&lt;/a&gt;</p>
<h3 id="backers">Backers</h3>
<p>Thanks go to all our backers! [<a href="https://opencollective.com/react-hook-form#backer">Become a backer</a>].</p>
<p>&lt;a href=&quot;<a href="https://opencollective.com/react-hook-form#backers">https://opencollective.com/react-hook-form#backers</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://opencollective.com/react-hook-form/backers.svg?width=950">https://opencollective.com/react-hook-form/backers.svg?width=950</a>&quot; /&gt;
&lt;/a&gt;

</p>
<h3 id="contributors">Contributors</h3>
<p>Thanks go to these wonderful people! [<a href="CONTRIBUTING.md">Become a contributor</a>].</p>
<p>&lt;a href=&quot;<a href="https://github.com/react-hook-form/react-hook-form/graphs/contributors">https://github.com/react-hook-form/react-hook-form/graphs/contributors</a>&quot;&gt;
  &lt;img src=&quot;<a href="https://opencollective.com/react-hook-form/contributors.svg?width=890&amp;button=false">https://opencollective.com/react-hook-form/contributors.svg?width=890&amp;button=false</a>&quot; /&gt;
&lt;/a&gt;</p>


Built with performance, UX and DX in mind，Embraces native HTML form validation，Out of the box integration with UI libraries

https://github.com/react-hook-form/react-hook-form

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://ahooks.js.org">https://ahooks.js.org</a>&quot;&gt;
    &lt;img width=&quot;200&quot; src=&quot;<a href="https://ahooks.js.org/logo.svg">https://ahooks.js.org/logo.svg</a>&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p>一套高质量可靠的 React Hooks 库</p>
<p><a href="https://www.npmjs.com/package/ahooks"><img src="https://img.shields.io/npm/v/ahooks.svg?style=flat" alt="NPM version"></a>
<a href="https://npmjs.org/package/ahooks"><img src="https://img.shields.io/npm/dw/ahooks.svg?style=flat" alt="NPM downloads"></a>
<a href="https://www.npmjs.com/package/ahooks-v2"><img src="https://img.shields.io/npm/dw/ahooks-v2?label=downloads%28v2%29" alt="npm"></a>
<a href="https://coveralls.io/github/alibaba/hooks?branch=master"><img src="https://coveralls.io/repos/github/alibaba/hooks/badge.svg?branch=master" alt="Coverage Status"></a>
<a href="https://github.com/alibaba/hooks/issues"><img src="https://img.shields.io/github/issues/alibaba/hooks" alt="npm"></a>
<img src="https://img.badgesize.io/https:/unpkg.com/ahooks/dist/ahooks.js?label=gzip%20size&compression=gzip" alt="gzip size">
<a href="http://isitmaintained.com/project/alibaba/hooks" title="Percentage of issues still open"><img src="http://isitmaintained.com/badge/open/alibaba/hooks.svg" alt="Percentage of issues still open"></a>
<a href="http://isitmaintained.com/project/alibaba/hooks" title="Average time to resolve an issue"><img src="http://isitmaintained.com/badge/resolution/alibaba/hooks.svg" alt="Average time to resolve an issue"></a>
<img src="https://img.shields.io/github/license/alibaba/hooks" alt="GitHub"></p>
<p><a href="https://github.com/alibaba/hooks/blob/master/README.md">English</a> | 简体中文</p>
<p>&lt;/div&gt;

</p>
<h2 id="📚-文档">📚 文档</h2>
<ul>
<li><a href="https://ahooks.js.org/">English</a></li>
<li><a href="https://ahooks.js.org/zh-CN/">中文</a></li>
</ul>
<h2 id="✨-特性">✨ 特性</h2>
<ul>
<li>易学易用</li>
<li>支持 SSR</li>
<li>对输入输出函数做了特殊处理，避免闭包问题</li>
<li>包含大量提炼自业务的高级 Hooks</li>
<li>包含丰富的基础 Hooks</li>
<li>使用 TypeScript 构建，提供完整的类型定义文件</li>
</ul>
<h2 id="📦-安装">📦 安装</h2>
<pre><code class="language-bash">$ npm install --save ahooks
# or
$ yarn add ahooks
# or
$ pnpm add ahooks
</code></pre>
<h2 id="🔨-使用">🔨 使用</h2>
<pre><code class="language-js">import { useRequest } from &#39;ahooks&#39;;
</code></pre>
<h2 id="💻-在线体验">💻 在线体验</h2>
<p><a href="https://codesandbox.io/s/demo-for-ahooks-forked-fg79k?file=/src/App.js"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit demo for ahooks"></a></p>
<h2 id="🤝-参与共建">🤝 参与共建</h2>
<pre><code class="language-bash">$ git clone git@github.com:alibaba/hooks.git
$ cd hooks
$ pnpm run init
$ pnpm start
</code></pre>
<p>打开浏览器访问 <a href="http://127.0.0.1:8000">http://127.0.0.1:8000</a></p>
<p>我们欢迎所有人参与共建，请参考<a href="https://github.com/alibaba/hooks/blob/master/CONTRIBUTING.zh-CN.MD">CONTRIBUTING.MD</a></p>
<p>感谢所有贡献者：</p>
<p>&lt;a href=&quot;<a href="https://github.com/alibaba/hooks/graphs/contributors">https://github.com/alibaba/hooks/graphs/contributors</a>&quot;&gt;
  &lt;img src=&quot;<a href="https://opencollective.com/ahooks/contributors.svg?width=960&amp;button=false">https://opencollective.com/ahooks/contributors.svg?width=960&amp;button=false</a>&quot; alt=&quot;contributors&quot; /&gt;
&lt;/a&gt;

</p>
<h2 id="👥-交流讨论">👥 交流讨论</h2>
<p>&lt;img src=&quot;https://user-images.githubusercontent.com/12526493/163084546-ed7a18a8-f05b-484e-a32c-049a05c350fd.JPG&quot; width=&quot;200&quot; style=&#39;display:inline&#39;/&gt;&lt;img src=&quot;https://user-images.githubusercontent.com/12526493/163084577-bab53c55-610e-4efe-96c7-eb0dd076c100.JPG&quot; width=&quot;200&quot; style=&#39;display:inline&#39;/&gt;&lt;img src=&quot;https://user-images.githubusercontent.com/12526493/163084584-bfb789fe-b5f4-4cd6-b4a5-2444bd67c1a5.JPG&quot; width=&quot;200&quot; style=&#39;display:inline&#39;/&gt;</p>


拥有丰富的自定义 Hooks，每个 Hooks 都有丰富的在线示例供您体验。包含适合全年龄段的丰富的 React Hooks 教程，想学 React Hooks，来这里就够了。

https://github.com/react-hook-form/react-hook-form

a hooks library - 为 React Hooks 而生