React Hook Form Schema

Features & Vision

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

Getting Started

To get started install react-hook-form-schema using the package manager of your choice.

Npm Installation

npm install react-hook-form-schema

Yarn Installation

yarn install react-hook-form-schema

Basic Example

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)}
    />
  );
}

Component Dictionary

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,
      }}
    />
  );
}