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: '[email protected]',
    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

• Example 1
• Example 2

API

Check out the api.

Contribution

React-Chloroform is open for contributions by the community. Read the contributing guidelines.

Testing

npm install

Link from the react-chloroform git repo:

npm link

And then link from your test project with:

npm link react-chloroform

Build es with:

npm run build:es:watch

License

MIT