react-breeze-form

Quickly render bootstrap styled react hook forms using a schema file.

Notice

Currently under development

Versions 2.x.xx are under development, and may have breaking changes

Required peer dependencies

• react-hook-form
• react-i18next
• react-select
• reactstrap

Quick example

Convert a configuration object such as:

const form = [
  {
    name: 'intro',
    type: (
      <div className="my-3" style={{color: 'green', fontWeight: 'bold'}}>
        Quick example / Ejemplo rápido
      </div>
    ),
  },
  {
    name: 'name',
    type: 'input',
    inputType: 'text',
    header: {
      className: 'input-header',
      id: 'full-name-header',
      text: 'common:fullName',
    },
    inputs: [
      {
        className: 'mt-4',
        inputType: 'text',
        name: 'firstName',
        placeholder: 'common:firstName',
        required: 'common:requiredField',
        type: 'input',
        validate: (value: any) =>
          !value.includes('test') || 'common:invalidName',
      },
      {
        className: 'mt-4',
        inputType: 'text',
        name: 'lasttName',
        placeholder: 'common:lastName',
        required: 'common:requiredField',
        type: 'input',
      },
    ],
  },
  {
    name: 'zip-language',
    type: 'input',
    inputType: 'text',
    inputs: [
      {
        name: 'zip',
        type: 'input',
        inputType: 'text',
        className: 'mt-2',
        placeholder: 'common:zip',
      },
      {
        name: 'language',
        type: 'singleselect',
        className: 'select-double mt-2',
        inputType: 'select',
        placeholder: 'common:language',
        options: [
          {label: 'common:english', value: 'en'},
          {label: 'common:spanish', value: 'es'},
        ],
      },
    ],
  },
  {
    name: 'submit',
    type: 'submitbtn',
    col: 8,
    placeholder: 'common:save',
  },
];

... into a full form component:

function App() {
  return (
    <div className="App">
      <Form onSubmit={(data) => console.log('Data', data)} form={form} />
    </div>
  );
}

Interactive demo

Demo: CodeSandBox

All configuration options

All possible configuration options are defined in the FormConfig interface file

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!