React-chloroform NPM

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;