# Simple React Form [![travis-ci](https://travis-ci.org/nicolaslopezj/simple-react-form.svg?branch=master)](https://travis-ci.org/nicolaslopezj/simple-react-form) [![npm version](https://badge.fury.io/js/simple-react-form.svg)](https://badge.fury.io/js/simple-react-form) Simple React Form is the simplest way to handle forms in React. It helps you make reusable form components in **React** and [React Native](#react-native). This is just a framework, you must [create the form components](#field-types) or [install a package with fields](#contributions) that you will use. To use with react native [check here](#react-native) ### Installation Install the base package ```sh npm install --save simple-react-form ``` ### Example ```js import React from 'react' import {Form, Field} from 'simple-react-form' import DatePicker from './myFields/DatePicker' import Text from './myFields/Text' class PostsCreate extends React.Component { state = {} render() { return (

) } } ``` ## Contributions - [simple-react-form-material-ui](https://github.com/nicolaslopezj/simple-react-form-material-ui) Material UI set of fields. - [simple-react-form-bootstrap](https://github.com/fermuch/simple-react-form-bootstrap) Bootstrap set of fields. # Docs ## Using with state In this example, the current value of the form will be stored in `this.state` ```js import React from 'react' import {Form, Field} from 'simple-react-form' import DatePicker from './myFields/DatePicker' import Text from './myFields/Text' class PostsCreate extends React.Component { state = {} render() { return (

) } } ``` ## Using without state In this example, the current value of the form will be stored inside the Form component and passed in the onSubmit function. The difference on this is that the `state` prop does not change over time. ```js import React from 'react' import {Form, Field} from 'simple-react-form' import DatePicker from './myFields/DatePicker' import Text from './myFields/Text' class PostsCreate extends React.Component { state = {} onSubmit({name, date}) {} render() { return (

) } } ``` ## Field Types React Simple Form is built from the idea that you can create custom components easily. Basically this consist in a component that have the prop `value` and the prop `onChange`. You must render the `value` and call `onChange` passing the new value when the value has changed. ```js import UploadImage from '../components/my-fields/upload' ``` ### Creating the field type You must create a React component. ```js import React from 'react' export default class UploadImage extends React.Component { render() { return (

{this.props.label}

this.props.onChange(event.target.value)} />

{this.props.errorMessage}

) } } ``` You can view the full list of props [here](https://github.com/nicolaslopezj/simple-react-form/blob/master/src/FieldType.js#L4). ## React Native With React Native the api is the same, but you must enclose the inner content of the form with a `View` component. Example: ```js import React from 'react' import {View, TextInput} from 'react-native' export default class TextFieldComponent extends React.Component { render() { return ( ) } } ``` Render the form in the component you want ```js import Text from '../components/my-fields/text' ``` > You should always render your fields inside a View when using react native. ### WithValue High order component If you need to get the current value of the form in the children you can use the `WithValue` component ```js import React from 'react' import {Form, Field, WithValue} from 'simple-react-form' export default class Example extends React.Component { render() { return (

) } } ``` ## Contributors - [@nicolaslopezj](http://github.com/nicolaslopezj) - [@fermuch](http://github.com/fermuch) - [@joadr](http://github.com/joadr) - [@prinzdezibel](http://github.com/prinzdezibel)

simple-react-form

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past