schema-form-generator v1.0.2

React Schema Form

A React component to generate forms from JS object schema. Uses React Hook Form for form management and Chakra UI UI elements.

Basic Example

schema.js

const schema = {
  title: 'Example Form',
  fields: {
    text: {
      type: 'text',
      label: 'Text Field'
    },
    textArea: {
      type: 'textarea',
      label: 'Text Area Field'
    },
    number: {
      type: 'number',
      label: 'Number Field'
    },
    object: {
      type: 'object',
      label: 'Object Field',
      displayInline: true,
      properties: {
        text1: {
          type: 'text',
          label: 'Text Field 1',
          isRequired: true,
        },
        text2: {
          type: 'text',
          label: 'Text Field 2',
          isRequired: true
        }
      }
    },
    array: {
      type: 'array',
      label: 'Array Field',
      items: {
        type: 'number',
        label: 'Number Field'
      }
    },
    radio: {
      type: 'radio',
      label: 'Radio Field',
      optionsKey: 'radioOptions'
    },
    select: {
      type: 'select',
      label: 'Select Field',
      optionsKey: 'selectOptions'
    }
  }
};

App.js

import { Form } from 'schema-form-generator';

const App = () => {
  const handleSubmit = values => {
    console.log(values);
  };

  return <Form schema={schema} handleSubmit={handleSubmit} />;
};

Output

Built With

• Chakra UI - Chakra UI is a simple, modular and accessible component library that gives you all the building blocks you need to build your React applications.
• React Hook Form - Performant, flexible and extensible forms with easy-to-use validation.

License

This project is licensed under the MIT License