WillBeebe/react-json-schema-form

OSS npm package to handle json schema driven forms

react-jsonschema-form

A complicated but powerful React component.

Fields and validation are purely driven via JSONSchema.

Support for Custom UI components, on top of Schema.

import React, { useCallback } from 'react';
import JsonSchemaForm from 'react-json-schema-form';

const CreateProjectModal = ({ onSubmit }) => {
    const schema = {
        type: 'object',
        properties: {
            name: {
                type: 'string',
                title: 'Name',
                minLength: 1,
            },
        },
        required: ['name'],
    };
    
    const uiSchema = {
        name: {
            'ui:autofocus': true,
            'ui:placeholder': 'Project Name',
        },
    };
    
    const handleSubmit = useCallback(
        async (formData) => {
            await onSubmit(formData);
            onClose();
        }, [onSubmit, onClose]
    );

    return (
        <JsonSchemaForm
            schema={schema}
            uiSchema={uiSchema}
            onSubmit={handleSubmit}
            hideSubmitButton={true}
        />);
};