rhf
react-hooks-form
npm i react-hooks-form
rhf

react-hooks-form

React Forms the Hooks Way

by Mehdi Namvar

2.0.1 (see all)License:ISCTypeScript:Not Found
npm i react-hooks-form
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.

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.

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 (
    <Form onSubmit={handleSubmit}>
      <FormField component="input" name="fullName" type="text" />
      <FormField component="input" name="email" type="text" />
      <FormField component="input" name="password" type="password" />
      <button type="submit">Sign Up</button>
    </Form>
  )
}

Hooks

// 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

Downloads/wk

256

GitHub Stars

24

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

13
VersionTagPublished
2.0.1
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial