Quick start
The following snippets will help you get started with our form-builder in no time ! 🚀
Install#
npm install @bedrockstreaming/form-builderBootstrap a form#
You can organize your files as you wish, this is a single file example for a quick start purpose
import { FormBuilder } from '@bedrockstreaming/form-builder';
const dictionary = { submit: ({ label }) => <button type="submit">{label}</button>, text: ({ value, onChange, label, errors }) => { return ( <div> <label>{label}</label> <input value={value} onChange={onChange} /> <span style={{ marginLeft: '10px', color: 'red' }}> {errors?.message} </span> </div> ); },};
const schema = { fields: { firstname: { id: '1', type: 'text', meta: { label: 'First name: ', }, defaultValue: '', }, lastname: { id: '2', type: 'text', meta: { label: 'Last name: ', }, defaultValue: '', validation: { required: { key: 'required', message: 'this field is required', value: true, }, }, }, }, fieldsById: ['firstname', 'lastname'], steps: { 'single-step-form': { fieldsById: ['firstname', 'lastname'], id: 'single-step-form', submit: { label: 'Submit', // action contains the label for the submit button }, meta: {}, // any step related data }, }, stepsById: ['single-step-form'],};
const extraValidation = {};
const onSubmit = (formValues) => { console.log(formValues);};
const MyForm = () => ( <FormBuilder schema={schema} extraValidation={extraValidation} dictionary={dictionary} onSubmit={onSubmit} />);
export default MyForm;