@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

@rjsf/core

Core logic and classic Bootstrap 3 theme for react-jsonschema-form.
Explore the docs »

View Playground · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• Contact

About The Project

Core logic and classic Bootstrap 3 theme for react-jsonschema-form.

Built With

• react-jsonschema-form
• Bootstrap 3

Getting Started

Prerequisites

• Bootstrap 3

To use the default Bootstrap 3 theme, add a Bootstrap 3 CSS tag to your HTML page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Installation

npm install @rjsf/core

Usage

import Form from '@rjsf/core';

Roadmap

See the general open issues.

Contributing

Read our contributors' guide to get started.

Contact

rjsf team: https://github.com/orgs/rjsf-team/people

GitHub repository: https://github.com/rjsf-team/react-jsonschema-form

Changelog

5.23.0

@rjsf/core

• Updated SchemaField to no longer make schema fields with const read-only by default, partially fixing #4344

@rjsf/utils

• Updated Experimental_DefaultFormStateBehavior to add a new constAsDefaults option
• Updated getDefaultFormState() to use the new constAsDefaults option to control how const is used for defaulting, fixing #4344, #4361 and #4377
• Use experimental_customMergeAllOf option in functions that have previously missed it.
• Updated ErrorSchemaBuilder methods addErrors and setErrors to prevent duplicate error messages.

@rjsf/validator-ajv8

• Fixed issue where error messages do not have title or ui:title if a Localizer function is used. Fixes #4387

Dev / docs / playground

• Updated the playground to add a selector for the constAsDefaults option