react-form-composer
live examples, code and docs.
Go toIntroduction
React-form-composer provides validation and state management for react, react-native and isomorphic forms. It has a download size of less than 7kB, is written with hooks and is optimized for fast rendering.
The small but powerful api is simular to ones provided by Informed or Redux-Form and it makes it suitable for anything from simple input forms through to large multi-row CRUD applications.
From Version 2.5 a set of ui-components is included. Version 3.0 has been simplified - now it is easier to get started.
Getting Started
Install with npm or yarn
npm install --save react-form-composer
or yarn add react-form-composer
Create a Simple Form
import React from 'react';import Form FormSpy useForm Text TextArea RadioGroup Radio Checkbox Select ValidationMessage from 'react-form-composer'; const TheFormState = const state = ; return <pre> <code>JSON</code> </pre> ;; const isValidSelector = stateformStatusisValid;const Button = props <FormSpy => isValid <button = >Submit</button> </FormSpy>; const lengthAtLeast5 = { return !value || valuelength < 5 ? 'Field must be at least five characters' : undefined;} const flexColumn = display: 'flex' flexDirection: 'column' marginTop: '10px' maxWidth: '200px' const MyForm = return <Form = => <label> Field : <Text ="fieldOne" =/> </label> <ValidationMessage ="fieldOne" =/> <label>Text Area: <TextArea ="fieldTwo"/></label> <label>Age: <Text ="age" ="number"/></label> <RadioGroup ="pet"> <div><label>Dog: <Radio ="dog" /></label></div> <div><label>Cat: <Radio ="cat"/></label></div> </RadioGroup> <label>Authorize? <Checkbox ="authorize"/></label> <label> Frequency <Select ="frequency" > <option ="" > Select One... </option> <option ="daily">Daily</option> <option ="weekly">Weekly</option> <option ="monthly">Monthly</option> </Select> </label> <label> Exercise <Select ="exercice" > <option ="Walk">walk</option> <option ="Run">run</option> <option ="Cycle">cycle</option> <option ="Swim">swim</option> </Select> </label> <Button/> <TheFormState/> </Form> );}; { window} { form;} ;
Going Further
React-form-composer is written for developers. For example, the built-in ui-components (like Text
, Checkbox
) make no use of any special/private features - they are written using the public api provided by the Field
component.
Design choices like this is what makes react-form-composer none-perscriptive - you can easily write your own ui-components or add features in many other ways.
To see this in practise take a look the CRUD example:
See live example)
Create a CRUD/REST-api form (import React from 'react';import RestApiCrudForm from '../../data-components/rest-api-crud-form';import TextInput NumberInput Checkbox from '../../ui-components'; const USER_ID=3;const Todo = disabled=false index return <> <NumberInput = = ="userId" = ="userId" /> <NumberInput = ="id" = ="id" /> <TextInput = ="title" = ="Title" /> <Checkbox = ="completed" = ="Completed" /> </> ; const TODOS_URL = 'https://jsonplaceholder.typicode.com/todos';const MyForm = <RestApiCrudForm ="todoList" = = = />; ;
Features
- Easy to write mult-row CRUD Forms connected to a rest api (See live example)
- Optimized for efficient rendering (See live example)
- Small bundle size (see bundlephobia)
- React-native support
- Perfect for server-rendering
- Stores values as semantic types, eg number fields will store numbers
- Format values, eg to put commas in numbers
- Field-arrays for repeated rows with add/remove
- Keeps a running error-count and valid/not valid status
- Synchronous and asynchronous validation
- Easy inter-field valiation (See live example)
Contributing
I'm keen to get feedback and to work collaboratively. Please let me know about any issues/ideas here.