fasst-form v1.0.0
fasst-form
Npm library for form rendering in React
Available frameworks :
Available Form inputs :
- Button
- Checkbox
- DatePicker
- Radio
- Select
- SirenInput
- Switch
- TextArea
Import fasst-form into your project
import FasstForm, { validateSchema } from 'fasst-form';
Generating a Form from JSON or YAML scheme
JSON scheme :
{ 'formStyle': { //'width': '300px' }, 'items': { 'id': 'firstname', 'component': 'input', 'label': 'Prénom', 'props': { 'type': 'text' } }, { 'id': 'email', 'component': 'input', 'label': 'Email', 'props': { 'type': 'email' } }, { 'id': 'checkbox', 'component': 'checkbox', 'label': 'Checkbox' }, { 'id': 'switch', 'component': 'switch', 'label': 'Switch' }, { 'id': 'select1', 'component': 'select', 'label': 'Select n°1' }, { 'id': 'confirm', 'component': 'button', 'label': 'Valider' } }
Using the following code in React :
<FasstForm
framework={'antd'}
schema={schema}
observers={{
lastname: (v) => console.log('lastname', v.target.value),
firstname: (v) => console.log('firstname', v.target.value),
confirm: () => console.log('ok')
}}
sets={{
select1: [{ label: 'Option n°1', value: 'option1' }, { label: 'Option n°2', value: 'option2' }, { label: 'Option n°3', value: 'option3' }],
select2: [{ label: 'Option n°4', value: 'option4' }, { label: 'Option n°5', value: 'option5' }, { label: 'Option n°6', value: 'option6' }]
}}
/>
4 years ago