React JSON Schema Form

Lately, I’ve been exploring this library called React JSON Schema Form. This project was started by Mozilla Team and then later evolved into a separate independent project. It’s basically a very simple but not so simple Form component. Anyone wanting to integrate a form full of varied widgets, features and customizations can use this library in their React applications.

RJSF generates React form based on JSON schema. It will capture the data as a JSON object. It also provides tools like form props and uiSchema to customize the look and feel of the form.

Why you should also care about knowing it?

Code reuse is the Holy Grail of Software Engineering. ~Douglas Crockford

• It’s open-source and it has a great active community. HUGE shout out to the RJSF community and all the helpful folks.
• Pretty easy to install and integrate into applications.
• A large number of widgets are available. You name it and it’s there!
• You can even integrate your favorite themes. RJSF supports Bootstrap 3(default), Bootstrap 4, MUI 4 & 5, fluent-ui, antd, Semantic-ui, chakra -ui and you can even create your very own custom themes.
• This library not just support custom theme but custom widgets and fields and custom templates.

Diving deep into RJSF

Installation

Firstly, install the dependency from npm:

$ npm install @rjsf/core — save

Then import the dependency:

import Form from “@rjsf/core”;

Note: RJSF renders form fields and widgets using Bootstrap semantics which means you’ll need to load the Boostrap stylesheet on the page to view the form properly by adding the following in “public>index.html”:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384 BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

You are all set to start creating your form now.

Configuration

1. JSON Schema: JSON object that defines the schema for another JSON object is called a JSON schema and goes by the convention described in the JSON Schema standard. We basically, define the shape of the JSON object with another JSON object. If we want to capture firstName, lastName, and telephone of a person the expected data JSON object will look like this:

And the JSON Shema object defines the shape of the data object above will look like:

Your form component should look like the below:

This is the least to get started with. Let’s see how our form looks..

Note: You can define the JSON object within the component itself or you can create a separate JSON file and then give the path of that JSON file in your Form component like below:

const schema = require("../schema.json")

2. UI Schema: With JSON Schema we can control what to define in form but using UI schema we control how to render.

Adding the uiSchema in our Form component as well:

Now our form looks like the below after adding uiSchema as well:

3. Form Data: Sometimes we want to pre-fill the data with the existing data. This can be done by passing a formData prop object matching the schema.

Validation

As we know JSON Schema defines the shape of the JSON data that we capture with the form. JSON schema allows us to precisely define the shape. But it’s just not limited to this, we can even limit the length of the string, allow only certain patterns, or an email regexp, etc. An example of validation is below:

The form will look like the below:

Dependencies

RJSF supports dependencies that allow us to add some functionality to our form. We can change our form dynamically based on user input. Something you’ll need to know before you get more into dependencies is dynamic schema permutation:

• allOf: Must be valid against all of the sub-schemas
• not: Must not be valid against the given schema
• oneOf: Must be valid against exactly one of the sub-schemas
• anyOf: Must be valid against any of the sub-schemas

To understand more about dependencies check out their documentation.

Note: Dependencies have been removed in the latest JSON Schema standards but RJSF still supports it.

I hope this blog helped you get started with the RJSF library and integrate it into your React applications. Now, I leave it to your curiosity to explore the plethora of features of RJSF from their official documentation. Do check out the live playground to develop more understanding through examples. Also, I’ve created a simple form for your reference which you can check out on my GitHub.

Do let me your feedback and suggestions so that I can improve by adding more to this blog.

Feel free to connect with me on LinkedIn or Twitter.

Thank you!