Welcome to react-hook-form-schema the React Hook Form, you know and love supercharged with json-schema parsing, custom components and layouts. RHFS supports or will support custom components, layouts, validation, remote submission and more.
The main goal of RHFS is to provide a bridge between json-schema and React Hook Form. RHFS provides a very minimal unstyled component set for testing but you the developer are expected to BYOC (Bring your own components), We provide a simple api for integrating your own Component Dictionary
To get started install react-hook-form-schema using the package manager of your choice.
npm install react-hook-form-schema
yarn install react-hook-form-schema
import { FormSchema } from "react-hook-form-schema";
export default function MyForm() {
return (
<FormSchema
name="my-form"
schema={{
$schema: "http://json-schema.org/draft-07/schema#",
type: "object",
properties: {
firstName: {
type: "string",
title: "First name",
},
lastName: {
type: "string",
title: "Last name",
},
},
required: ["firstName", "lastName"],
}}
defaultValues={{ firstName: "", lastName: "" }}
onSubmit={(values) => console.log(values)}
/>
);
}
import { FormSchema } from "react-hook-form-schema";
const TextInput = ({ register, name, label, required = false }) => (
<div>
<label>{label}</label>
<input {...register(name, { required })} />
</div>
);
export default function MyForm() {
return (
<FormSchema
name="my-form"
schema={{
...schema,
}}
defaultValues={{ firstName: "", lastName: "" }}
onSubmit={(values) => console.log(values)}
components={{
string: TextInput,
}}
/>
);
}