@rjsf/core

What is @rjsf/core?

@rjsf/core is a React library for building forms from JSON schema. It provides a simple way to create and manage forms in React applications by leveraging JSON schema definitions.

What are @rjsf/core's main functionalities?

Form Creation

This feature allows you to create a form based on a JSON schema. The schema defines the structure and validation rules for the form fields.

const Form = require('@rjsf/core').default;
const schema = {
  title: "A registration form",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {
    firstName: {type: "string", title: "First name", default: "Chuck"},
    lastName: {type: "string", title: "Last name"},
    age: {type: "integer", title: "Age"}
  }
};

const App = () => (
  <Form schema={schema} />
);

Custom Widgets

This feature allows you to use custom widgets for form fields. You can define your own React components to be used as widgets in the form.

const { default: Form } = require('@rjsf/core');
const CustomWidget = (props) => {
  return (
    <input type="text" value={props.value} onChange={(event) => props.onChange(event.target.value)} />
  );
};

const schema = {
  title: "A form with custom widget",
  type: "object",
  properties: {
    customField: {type: "string", title: "Custom Field"}
  }
};

const uiSchema = {
  customField: {
    "ui:widget": CustomWidget
  }
};

const App = () => (
  <Form schema={schema} uiSchema={uiSchema} />
);

Form Validation

This feature allows you to define validation rules in the JSON schema. The form will automatically validate the input based on these rules.

const { default: Form } = require('@rjsf/core');
const schema = {
  title: "A form with validation",
  type: "object",
  properties: {
    age: {type: "integer", title: "Age", minimum: 18}
  }
};

const App = () => (
  <Form schema={schema} />
);

Other packages similar to @rjsf/core

formik

Formik is a popular form library for React that provides a higher-level API for managing form state, validation, and submission. Unlike @rjsf/core, Formik does not use JSON schema for form definitions but offers more flexibility in handling complex form logic.

react-hook-form

React Hook Form is a performant, flexible, and extensible form library for React. It uses hooks to manage form state and validation, providing a more lightweight and performant alternative to @rjsf/core. It does not rely on JSON schema but offers great control over form behavior.

redux-form

Redux Form is a library for managing form state in Redux. It integrates deeply with Redux to provide a seamless way to handle form state and validation. Unlike @rjsf/core, it requires Redux as a dependency and is more suitable for applications already using Redux.

README

The README file is missing