This package has been deprecated

Author message:

Package rebranded as @forml/core

rjsf

Table of Contents

1. rjsf
   1. Examples
   2. Customization
   3. Localization
   4. Usage

rjsf

rjsf - react json schema form

A lightweight, efficient form rendering library for use with your JSON schemas. Automatically generate and customize working forms for use in your application. Great for rapid prototyping and general usage.

Examples

You can view the running demo.

Alternatively, you can run them yourself.

cd examples
npm install
npm start

## Installation

npm i rjsf

Customization

Custom mapped components can be provided. Look at mapper/index.js to see a list of supported object types. New types may be added and used by explicitly setting the form type.

Appearance/final rendering is handled by the decorator components. Currently a barebones (pure HTML) and MaterialUI decorators are provided.

Localization

rjsf supports localization via injection. To inject a localizer:

import {SchemaForm, decorators} from 'rjsf';
import {useTranslate} from 'react-i18next';
import {createElement as h, useState} from 'react';

export function MyTranslatedForm(props) {
    const [model, setModel] = useState({});
    const {t} = useTranslate();
    const decorator = decorators.mui;
    const schema = {
        type: 'object',
        properties: {
            key: {type: 'string', title: "Titles are passed through getLocalizedString", description: "Descriptions too"}
        }
    };

    const localizer = {getLocalizedString: t};

    return h(SchemaForm, {model, schema, localizer, decorator});
}

Usage

Basic usage is as follows:

(rjsf is fully compatible with JSX, it’s just not my cup of tea)

import {SchemaForm, decorators} from 'rjsf';
import {createElement as h, useState} from 'react';

export function MyForm(props) {
    const [model, setModel] = useState('');
    const schema = {type: 'string', title: 'Sample Form'};
    const form = ['*'];
    const decorator = decorators.barebones;

    return h(SchemaForm, {model, schema, decorator, form, onChange});

    function onChange(event, model) {
        setModel(model);
    }
}

The example directory’s index.js uses SchemaForm both for the example selector and the example itself.