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:

`jsx
const form = [
{
name: 'intro',
type: (



),
},
{
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:

`jsx
function App() {
return (



);
}
``

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!