HotForm is a JavaScript library for building React custom forms.
Run one of the following commands to add HotForm to your project:
npm i @hotform/react
yarn add @hotform/react
react
>= 16.0.0 is a peer dependency.
Learn the basics of working with HotForm.
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
Visit the examples page to see how we recommend implementing HotForm with various React packages like Material UI, Yup and more.
The official documentation website is hotform.org.
Licensed under the MIT license.