https://github.com/geowarin/react-easy-form

Easy forms for react 0.14+.
https://github.com/geowarin/react-easy-form

Last synced: about 4 hours ago
JSON representation

Easy forms for react 0.14+.

• Host: GitHub
• URL: https://github.com/geowarin/react-easy-form
• Owner: geowarin
• License: mit
• Created: 2015-11-14T15:17:22.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-07-25T20:56:11.000Z (over 8 years ago)
• Last Synced: 2024-09-25T21:20:56.452Z (about 1 month ago)
• Language: JavaScript
• Size: 237 KB
• Stars: 5
• Watchers: 2
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-easy-form

[![npm](https://img.shields.io/npm/v/react-easy-form.svg)](https://www.npmjs.com/package/react-easy-form)

[![Dependency Status](https://img.shields.io/david/geowarin/react-easy-form.svg)](https://david-dm.org/geowarin/react-easy-form)

[![devDependency Status](https://img.shields.io/david/dev/geowarin/react-easy-form.svg)](https://david-dm.org/geowarin/react-easy-form#info=devDependencies)

Easy forms for react 0.14+.

It uses React's context to allow form component to automatically update the

form state.

Supports HTML5 form validation.

## Demo & Examples

Live demo: [geowarin.github.io/react-easy-form](http://geowarin.github.io/react-easy-form/)

To build the examples locally, run:

```

npm install

npm start

```

Then open [`localhost:8000`](http://localhost:8000) in a browser.

## Installation

The easiest way to use react-easy-form is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).

You can also use the standalone build by including `dist/react-easy-form.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.

```

npm install react-easy-form --save

```

## Usage

### Simple usage

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import {Form, TextInput, Checkbox, Select, Label} from 'react-easy-form';

const values = ['1', '2', '3'];

const valuesMap = {

	1: 'one',

	2: 'two',

	3: 'three'

};

const initialData = {

	firstName: 'Jean',

	select: '2',

	selectMap: '2'

};

const App = () => (

			 console.log(data)}>

				

				

				

				

					

				

				

					

				

				

				Submit

			

	);

ReactDOM.render(, document.getElementById('app'));

```

### Example of Styling

The following example uses [Pure forms](http://purecss.io/)

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import {Form, TextInput, Checkbox, Select, Label} from 'react-easy-form';

const values = ['1', '2', '3'];

const initialData = {

	firstName: 'Jean',

	select: '2'

};

const LabeledInput = (props) => (

		


			

				

			

		

	);


const LabeledSelect = (props) => (

		


			

				

			

		

	);


const App = () => (

			 console.log(data)}>

				

					

					

					

					

					


						

							 Agree

						


						Submit

					

				

			

		);


ReactDOM.render(, document.getElementById('app'));

```

### Calling submit programmatically

You can call the submission of the form in javascript.

This will still trigger validation of the inputs.

```javascript

...

this.refs.myForm.submit()

```

## Development (`src`, `lib` and the build process)

**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).

## License

MIT

Copyright (c) 2015 Geoffroy Warin.