https://github.com/darrikonn/react-chloroform

A framework for building forms in React applications 📝
https://github.com/darrikonn/react-chloroform

form form-validation form-validation-react forms react validation

Last synced: 3 months ago
JSON representation

A framework for building forms in React applications 📝

• Host: GitHub
• URL: https://github.com/darrikonn/react-chloroform
• Owner: darrikonn
• License: mit
• Created: 2017-09-14T22:44:48.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T06:15:15.000Z (about 2 years ago)
• Last Synced: 2024-10-01T11:08:13.390Z (4 months ago)
• Topics: form, form-validation, form-validation-react, forms, react, validation
• Language: TypeScript
• Homepage:
• Size: 5.56 MB
• Stars: 19
• Watchers: 2
• Forks: 0
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - react-chloroform - A framework for building forms in React applications (JavaScript)

README

        
# react-chloroform

---

[![NPM Version](https://img.shields.io/npm/v/react-chloroform.svg?style=flat)](https://www.npmjs.com/package/react-chloroform)

[![NPM Downloads](https://img.shields.io/npm/dt/react-chloroform.svg?style=flat)](https://npmcharts.com/compare/react-chloroform?minimal=true)

[![Build Status](https://img.shields.io/travis/darrikonn/react-chloroform.svg?style=flat)](https://travis-ci.org/darrikonn/react-chloroform)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![License](https://img.shields.io/github/license/darrikonn/react-chloroform.svg)](https://github.com/darrikonn/react-chloroform/blob/master/LICENSE)

## 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:

```

```

Or alternatively the `es5 commonjs` build:

```

```

## Examples

Refer to [`/examples`](https://github.com/darrikonn/react-chloroform/tree/master/examples) for all example source code.

### Quick start

```jsx

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 (

    

      


        Email: 

        

         
{error}
} />

      


      


        Name: 

        

      


      


        

      

    

   );

 };


export default YourFormComponent;

```

### Fiddles

- [`Example 1`](https://jsfiddle.net/darrikonn/gshkfp9v/)

- [`Example 2`](https://jsfiddle.net/darrikonn/61z0exLq/)

## API

Check out the [`api`](https://github.com/darrikonn/react-chloroform/blob/master/API.md).

## Contribution

React-Chloroform is open for contributions by the community.

Read the [`contributing guidelines`](https://github.com/darrikonn/react-chloroform/blob/master/CONTRIBUTING.md).

## Testing

```bash

npm install

```

Link from the react-chloroform git repo:

```bash

npm link

```

And then link from your test project with:

```bash

npm link react-chloroform

```

Build es with:

```bash

npm run build:es:watch

```

## License

MIT