HotForm

HotForm is a JavaScript library for building React custom forms.

Contents

• Installation
  • npm
  • yarn
  • Peer Dependencies
• Usage
  • Quickstart
  • Examples
• Documentation
• License

Installation

Run one of the following commands to add HotForm to your project:

npm

npm i @hotform/react

yarn

yarn add @hotform/react

Peer Dependencies

react >= 16.0.0 is a peer dependency.

Usage

Learn the basics of working with HotForm.

Quickstart

Create a new component that uses the hook from @hotform/react. To start with, add the initial schema and the validity event handler to the hook argument.

import { useHotForm } from '@hotform/react'

const BasicForm = () => {
  const { currentSchema, handleChange, handleSubmit } = useHotForm({
    initialSchema: {
      firstName: {
        validator: value => !!value,
        value: '',
      },
      lastName: {
        validator: value => !!value,
        value: '',
      },
    },
    async onValid({ fieldValues }) {
      await new Promise(resolve => setTimeout(resolve, 500))
      alert(JSON.stringify(fieldValues, null, 2))
    },
  })
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input
          id="firstName"
          name="firstName"
          onChange={handleChange}
          placeholder="Enter your first name"
          value={currentSchema.firstName.value}
        />
      </div>
      <div>
        <label htmlFor="lastName">Last Name</label>
        <input
          id="lastName"
          name="lastName"
          onChange={handleChange}
          placeholder="Enter your last name"
          value={currentSchema.lastName.value}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

export default BasicForm

Examples

Visit the examples page to see how we recommend implementing HotForm with various React packages like Material UI, Yup and more.

Documentation

The official documentation website is hotform.org.

License

Licensed under the MIT license.