@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.6.0

@rjsf/antd

• Treat multiple as a boolean rather than comparing against undefined in the SelectWidget, fixing #3595

@rjsf/core

• Switched Form to use the new validatorDataMerge() and toErrorList() functions instead of the now deprecated schemaUtils.mergeValidatorData() and schemaUtils.getValidator().toErrorList()
• Added option to provide a callback function to focusOnFirstError (3590)
• Updated MultiSchemaField to handle the OpenAPI discriminator extension on anyOf/oneOf fields by passing it into getClosestMatchingOption() if it exists, fixing #3512
• Updated SchemaField function to use getSchemaType rather than schema.type to set the proper class name.

@rjsf/utils

• Refactored the createErrorHandler(), toErrorList(), toErrorSchema() and unwrapErrorHandler() functions from the @rjsf/validator-ajv6 and @rjsf/validator-ajv8 implementations since they were identical
  • As a result, the mergeValidationData() function was deprecated in favor of the new validationDataMerge() function that uses the refactored toErrorList() function
  • Refactored the ROOT_SCHEMA_PREFIX constant as well
• Updated ValidatorType and SchemaUtilsType to deprecate the toErrorList() and mergeValidationData() functions, respectively
• Updated the getClosestMatchingOption() and getFirstMatchingOption() to pass the new discriminatorField to the getMatchingOption() function
• Updated getMatchingOption() to use discriminatorField when it is present in the options object properties to drill into the object to detect if that one field is valid
• Updated SchemaUtilsType and the associated forward functions in createSchemaUtils to add the new discriminatorField?: string optional parameter
• Updated toIdSchema() function to use getSchemaType(schema) === 'object' rather than schema.type === 'object' to get the proper pathing for ids, fixing #2044

@rjsf/validator-ajv6

• Removed the refactored functions and constant from the AJV6Validator in favor of using the new functions and constant from @rjsf/utils

@rjsf/validator-ajv8

• Removed the refactored functions and constant from the AJV8Validator in favor of using the new functions and constant from @rjsf/utils

Dev / docs / playground

• Updated the utility-functions documentation to describe the new refactored functions as well as deprecating the mergeValidationData() function
• Updated the playground to properly restore liveSettings from shared links and added a switch for noHtml5Validation in the live settings rather than having it set to true always
  • Also added a new Blank example to help users easily paste their code