Performant, flexible and extensible forms with easy to use validation.

[![npm downloads](https://img.shields.io/npm/dm/react-hook-form-input.svg?style=flat-square)](https://www.npmjs.com/package/react-hook-form) [![npm](https://img.shields.io/npm/dt/react-hook-form-input.svg?style=flat-square)](https://www.npmjs.com/package/react-hook-form) [![npm](https://badgen.net/bundlephobia/minzip/react-hook-form-input)](https://badgen.net/bundlephobia/minzip/react-hook-form) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=React+hooks+for+form+validation+without+the+hassle&url=https://github.com/bluebill1049/react-hook-form) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-hook-form)

## Why? React Hook Form embrace uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as React-Select, AntD and Material-UI. This wrapper component will make your life easier to work with them. ## Features - Isolate re-rendering at component level - Integrate easily with React Hook Form (skip custom register at `useEffect`) - Enable reset API with Controlled Components without external state ## Install $ npm install react-hook-form-input ## Demo Check out this React Web demo or React Native demo. ## Quickstart #### React Web ```jsx import React from 'react'; import useForm from 'react-hook-form'; import { RHFInput } from 'react-hook-form-input'; import Select from 'react-select'; const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, ]; function App() { const { handleSubmit, register, setValue, reset } = useForm(); return (

console.log(data))}> } rules={{ required: true }} name="reactSelect" register={register} setValue={setValue} /> ); } ``` #### React Native ```jsx import * as React from 'react'; import { View, TextInput, Button } from 'react-native'; import useForm from 'react-hook-form'; import { RHFInput } from './index'; export default () => { const { register, setValue, handleSubmit } = useForm(); const onSubmit = data => console.log(data); const onChange = args => ({ value: args[0].nativeEvent.text, }); return ( } onChangeEvent={onChange} name="firstName" />