react-chloroform
Why
"No hooking up, super lightweight, and easy to use".
A form validation library with only react and prop-types as its dependency.
Install
To install this package, run:
npm install --save react-chloroform
yarn users can use:
yarn add react-chloroform
You can also use the UMD build:
<script src="path-to-react-chloroform/dist/react-chloroform.min.js"></script>
Or alternatively the es5 commonjs build:
<script src="path-to-react-chloroform/lib/react-chloroform.js"></script>
Examples
Refer to /examples for all example source code.
Quick start
import React from 'react';
import {Form, FormInput, Button, ChloroformError} from 'react-chloroform';
const YourFormComponent = () => {
const handleSubmit = model => console.log(model);
const initialState = {
email: 'example@example.com',
name: 'John Doe',
};
const isRequired = val => (val && val.length > 0) || 'This field is required';
return (
<Form initialState={initialState} onSubmit={handleSubmit}>
<div>
<label htmlFor="email_1">Email: </label>
<FormInput model="email" id="email_1" validator={[isRequired]} />
<ChloroformError model="email" component={({error}) => <p>{error}</p>} />
</div>
<div>
<label htmlFor="name_1">Name: </label>
<FormInput model="name" id="name_1" />
</div>
<div>
<Button type="submit" text="Submit" />
</div>
</Form>
);
};
export default YourFormComponent;Fiddles
API
Check out the api.
Contribution
React-Chloroform is open for contributions by the community.
Read the contributing guidelines.
Testing
npm installLink from the react-chloroform git repo:
npm linkAnd then link from your test project with:
npm link react-chloroformBuild es with:
npm run build:es:watchLicense
MIT
