Skip to content

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

License

Notifications You must be signed in to change notification settings

start-at-root/react-breeze-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8e4d308 · Mar 19, 2020
Mar 18, 2020
Aug 3, 2019
Mar 19, 2020
Jul 30, 2019
Jul 30, 2019
Aug 24, 2019
Aug 3, 2019
Jul 30, 2019
Aug 3, 2019
Jul 30, 2019
Jul 30, 2019
Jul 30, 2019
Mar 18, 2020
Mar 19, 2020
Jul 30, 2019
Jul 30, 2019
Jul 29, 2019
Mar 18, 2020
Jul 30, 2019
Jul 30, 2019
Mar 19, 2020
Mar 19, 2020
Aug 4, 2019
Aug 4, 2019
Aug 3, 2019

Repository files navigation

react-breeze-form

Build Status codecov Maintainability All Contributors semantic-release

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

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!