Create forms simply using React.
import { Form } from 'formik-schema';
ReactDOM.render(
<Form
schema={{
fields: [
{ name: "email", title: "Email", type: "email" },
{ name: "date", title: "Chose a date", type: "date" },
{ name: "accept", title: "Conditions", type: "checkbox", description: "I accept everything." }
]
}}
initialValues={{ accept: true }}
onSubmit={(values) => {console.log(values)}}
/>,
document.getElementById('root')
);
Built-in support for Bootstrap 4, multiple widgets available, highly customizable renderers.
npm install formik-schema --save
This library comes with a few basic tests, using Jest:
npm test
This will actually build the bundle and run a few snapshot tests against it.
You can register your own widgets (or override existing ones) simply:
import { registerWidget } from 'formik-schema';
registerWidget('textarea', (config, params) => (
<MyTextarea name={config.name} onChange={params.handleChange} id={config.name} value={params.values[config.name]} rows={config.rows || 3} />
));
By default, forms are rendered as Bootstrap 4 vertical forms (see https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form). You can also register your own renderer, e.g.:
import { makeWidget, registerRenderer } from 'formik-schema';
registerRenderer('table-form',
(schema) => (params) => (
<form onSubmit={params.handleSubmit}>
<table>
{schema.fields.map((field) => (
<tr>
<td>{field.title}</td>
<td>{makeWidget(field, params)}</td>
</tr>
))}
</table>
<button type="submit">OK</button>
</form>
)
);
Under the hood, this library uses Formik to handle form state and submission.
The variable params
appearing in the code samples is documented in Formik (see https://github.com/jaredpalmer/formik#the-gist).