Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nicolaslopezj/simple-react-form

The simplest way to handle forms in React
https://github.com/nicolaslopezj/simple-react-form

form meteor react react-native schemas

Last synced: 4 days ago
JSON representation

The simplest way to handle forms in React

Awesome Lists containing this project

README 

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

      


         this.setState(state)}>

          

          

        

        
My name is {this.state.name}


      


    )

  }

}

```



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

      


         this.setState(state)}>

          

          

        

        
My name is {this.state.name}


      


    )

  }

}

```



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

      


        

          

          

        

         this.refs.form.submit()}>Submit

      


    )

  }

}

```



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



 this.setState(changes)}>

  

    

    

  



```



> 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 (

      


        

          

            {value => (

              


                
The name is {value.name}


                

              


            )}

          

        

      


    )

  }

}

```



## Contributors



- [@nicolaslopezj](http://github.com/nicolaslopezj)

- [@fermuch](http://github.com/fermuch)

- [@joadr](http://github.com/joadr)

- [@prinzdezibel](http://github.com/prinzdezibel)