https://github.com/ilxanlar/react-hooks-form
React Forms the Hooks Way
https://github.com/ilxanlar/react-hooks-form
form hooks react react-hooks-form
Last synced: 3 months ago
JSON representation
React Forms the Hooks Way
- Host: GitHub
- URL: https://github.com/ilxanlar/react-hooks-form
- Owner: ilxanlar
- Created: 2019-01-11T15:12:57.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T02:39:16.000Z (over 2 years ago)
- Last Synced: 2024-10-10T22:17:31.419Z (8 months ago)
- Topics: form, hooks, react, react-hooks-form
- Language: JavaScript
- Homepage: https://ilxanlar.github.io/react-hooks-form/
- Size: 2.47 MB
- Stars: 27
- Watchers: 3
- Forks: 3
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Hooks Form
React Hooks Form offers an easy way to manage your forms in React.
It's built using the famous React Hooks!
### Documentation
You can find the complete documentation [here](https://ilxanlar.github.io/react-hooks-form).
### Usage
Install via NPM or Yarn:
```
npm install react-hooks-form --save
yarn add react-hooks-form
```
The following code snippet is a basic example of using React Hooks Form.
```jsx harmony
import React from 'react'
import { Form, FormField } from 'react-hooks-form'
async function handleSubmit(values) {
try {
await _myApiRequest(values)
} catch (error) {
alert(error.message)
}
}
function SignUpForm() {
return (
Sign Up
)
}
```
### Hooks
```js
// Hook to field value
const amount = useFormFieldValue('amount')
// Hook to field error, focus status and ...
const {
active,
error,
invalid,
visited
} = useFormFieldMeta('amount')
// Hook to get form all values
const values = useFormValues()
// Hook to form submission status, errors and ...
const {
submitting,
submitFailed,
submitSucceeded,
error
} = useFormMeta()
// Hook to access form API
const formApi = useForm() // There are plenty of methods
```