forml-js/forml

forml - extensible react json schema form generator

Table of Contents

1. forml
   1. Documentation
   2. Examples
   3. Installation
   4. Usage
   5. Customization
   6. Localization

forml

forml - react json schema form

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

Documentation

View the documentation at forml.dev!

Examples

You can view the running demo.

Alternatively, you can run them yourself.

cd examples
npm install
npm start

Installation

# Substitute @forml/decorator-mui with your preferred decorator
npm i @forml/core @forml/decorator-mui

Usage

Basic usage is as follows:

import { SchemaForm } from '@forml/core';
import * as decorator from '@forml/decorator-mui';
import { useState } from 'react';

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

    return (
        <SchemaForm
            model={model}
            schema={schema}
            decorator={decorator}
            form={form}
            onChange={onChange}
        />
    );

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

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

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

forml supports localization via injection. To inject a localizer:

import { SchemaForm } from '@forml/core';
import * as decorator from '@forml/decorator-mui';
import { useTranslate } from 'react-i18next';
import { useState } from 'react';

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

    const localizer = { getLocalizedString: t };

    return (
        <SchemaForm
            model={model}
            schema={schema}
            localizer={localizer}
            decorator={decorator}
            onChange={onChange}
        />
    );

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

Contributing

forml prides itself on being easily extensible. More UI packages are being added and contributions are welcome.