<commit_before># react-easy-form

Easy forms for react 0.14+.
It uses React's context to allow form component to automatically update the
form state.
It natively uses 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
var React = require('react');
var ReactDOM = require('react-dom');
const {Form, TextInput, Checkbox, Select} = require('react-easy-form');

const values = ['1', '2', '3'];
const valuesMap = {
	1: 'one',
	2: 'two',
	3: 'three'
};

const initialData = {
	firstName: 'Jean',
	select: '2',
	selectMap: '2',
	prod: true
};

const App = () => {
	return (
			<Form initialData={initialData} onSubmit={(data) => console.log(data)}>
				<TextInput name="firstName" required/>
				<TextInput 	name="email" type="email"
										placeholder="Enter your address" required />
				<TextInput 	label="Country code" name="country" required
										pattern="[A-Za-z]{3}" title="Three letter country code" />

				<Label value="Select built with an array" position="before">
					<Select name="select" values={values}/>
				</Label>

				<Label value="Select built with an object (map)" position="after">
					<Select name="selectMap" values={valuesMap}/>
				</Label>

				<Checkbox name="check1" required />

				<button type="submit">Submit</button>
			</Form>
	);
}

ReactDOM.render(<App />, document.getElementById('app'));
```

### Example of Styling

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

```javascript
var React = require('react');
var ReactDOM = require('react-dom');
const {Form, TextInput, Checkbox, Select, Label} = require('react-easy-form');

const values = ['1', '2', '3'];
const initialData = {
	firstName: 'Jean',
	select: '2',
	selectMap: '2'
};

const LabeledInput = (props) => {
	return (
		<div className="pure-control-group">
			<Label value={props.label} position="before">
				<TextInput {...props}/>
			</Label>
		</div>)
}

const LabeledSelect = (props) => {
	return (
		<div className="pure-control-group">
			<Label value={props.label} position="before">
				<Select {...props}/>
			</Label>
		</div>)
}


const App = () => {
	return (
			<Form className="pure-form pure-form-aligned" initialData={initialData} onSubmit={(data) => console.log(data)}>
				<fieldset>
					<LabeledInput label="First Name" name="firstName" required/>
					<LabeledInput label="E-mail" placeholder="Enter your email"
												name="email" type="email" required/>

					<LabeledInput label="Country code" name="country" required
												pattern="[A-Za-z]{3}" title="Three letter country code" />

					<LabeledSelect label="Select from array" name="select" values={values}/>

					<div className="pure-controls">
						<Label className="pure-checkbox">
							<Checkbox name="agree" title="Accept TOS" required/> Agree<commit_msg>Fix readme<commit_after># react-easy-form

Easy forms for react 0.14+.
It uses React's context to allow form component to automatically update the
form state.
It natively uses 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
var React = require('react');
var ReactDOM = require('react-dom');
const {Form, TextInput, Checkbox, Select} = require('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 = () => {
	return (
			<Form initialData={initialData}
					onSubmit={(data) => console.log(data)}>
				<TextInput name="firstName" required/>
				<TextInput 	name="email" type="email"
							placeholder="Enter your address" required />
				<TextInput 	label="Country code" name="country" required
							pattern="[A-Za-z]{3}" title="Three letter country code" />

				<Label value="Select built with an array" position="before">
					<Select name="select" values={values}/>
				</Label>

				<Label value="Select built with an object (map)" position="after">
					<Select name="selectMap" values={valuesMap}/>
				</Label>

				<Checkbox name="check1" required />

				<button type="submit">Submit</button>
			</Form>
	);
}

ReactDOM.render(<App />, document.getElementById('app'));
```

### Example of Styling

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

```javascript
var React = require('react');
var ReactDOM = require('react-dom');
const {Form, TextInput, Checkbox, Select, Label} = require('react-easy-form');

const values = ['1', '2', '3'];
const initialData = {
	firstName: 'Jean',
	select: '2'
};

const LabeledInput = (props) => {
	return (
		<div className="pure-control-group">
			<Label value={props.label} position="before">
				<TextInput {...props}/>
			</Label>
		</div>
	)
}

const LabeledSelect = (props) => {
	return (
		<div className="pure-control-group">
			<Label value={props.label} position="before">
				<Select {...props}/>
			</Label>
		</div>
	)
}


const App = () => {
	return (
			<Form className="pure-form pure-form-aligned" initialData={initialData}
			onSubmit={(data) => console.log(data)}>
				<fieldset>
					<LabeledInput label="<NAME>" name="firstName" required/>
					<LabeledInput label="E-mail" placeholder="Enter your email"
									name="email" type="email" required/>

					<LabeledInput label="Country code" name="country" required
									pattern="[A-Za-z]{3}" title="Three letter country code" />

					<LabeledSelect label="Select from array" name="select" values={values}/>

					<div className="pure-controls">
						<Label className="pure-checkbox">
							<Checkbox name="agree" title="Accept TOS" required/> Agree
{'fraction_non_alphanumeric': 0.16472282217422607, 'fraction_numerical': 0.007919366450683946, 'mean_word_length': 4.015162454873646, 'pattern_counts': {'":': 0, '<': 72, '<?xml version=': 0, '>': 84, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2415730', 'n_tokens_mistral': 2510, 'n_tokens_neox': 2145, 'n_words': 631}