react-form-composer v3.1.3
react-form-composer
Go to live examples, code and docs.
Introduction
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} = useForm();
return (
<pre>
<code>{JSON.stringify(state.fieldValues, null, 2)}</code>
</pre>
);
};
const isValidSelector = state => state.formStatus.isValid;
const Button = (props) => (
<FormSpy selector={isValidSelector}>
{(isValid) => (
<button {...props} style={{backgroundColor: isValid? 'green': 'cyan'}} >Submit</button>
)}
</FormSpy>
);
const lengthAtLeast5 = value => {
return !value || value.length < 5 ? 'Field must be at least five characters' : undefined;
}
const flexColumn = {
display: 'flex',
flexDirection: 'column',
marginTop: '10px',
maxWidth: '200px'
}
const MyForm = () => {
return (
<Form onSubmit={submitValues} onSubmitSuccess={clearValues}>
<label>
Field One (5+ chars):
<Text name="fieldOne" required validate={lengthAtLeast5}/>
</label>
<ValidationMessage name="fieldOne" render={error => <p>{error}</p>}/>
<label>Text Area: <TextArea name="fieldTwo"/></label>
<label>Age: <Text name="age" type="number"/></label>
<RadioGroup name="pet">
<div><label>Dog: <Radio value="dog" selected/></label></div>
<div><label>Cat: <Radio value="cat"/></label></div>
</RadioGroup>
<label>Authorize? <Checkbox name="authorize"/></label>
<label>
Frequency
<Select name="frequency" required>
<option value="" disabled>
Select One...
</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
</Select>
</label>
<label>
Exercise
<Select name="exercice" multiple>
<option value="Walk">walk</option>
<option value="Run">run</option>
<option value="Cycle">cycle</option>
<option value="Swim">swim</option>
</Select>
</label>
<Button/>
<TheFormState/>
</Form>
);
};
function submitValues(values) {
window.alert(`You submitted:${JSON.stringify(values, null, 2)}`)
}
function clearValues(form) {
form.updateFields({});
}
export default MyForm;
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:
Create a CRUD/REST-api form (See live example)
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
defaultValue={USER_ID}
disabled={true}
name="userId"
id={`userId${index}`}
required
label="userId"
/>
<NumberInput
disabled={true}
name="id"
id={`id${index}`}
label="id"
/>
<TextInput
disabled={disabled}
name="title"
id={`title${index}`}
required
label="Title"
/>
<Checkbox
disabled={disabled}
name="completed"
id={`completed${index}`}
label="Completed"
/>
</>
);
}
const TODOS_URL = 'https://jsonplaceholder.typicode.com/todos';
const MyForm = () => (
<RestApiCrudForm
name="todoList"
resourceUrl={TODOS_URL}
urlForRead={`${TODOS_URL}?userId=${USER_ID}`}
inputComponent={Todo}
/>
);
export default MyForm;
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.
Go to live examples, code and docs.
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago