Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/esbenp/react-native-clean-form

Easy react-native forms using bootstrap-like syntax with redux-form+immutablejs integration. Styled using styled-components
https://github.com/esbenp/react-native-clean-form

react-native redux redux-form styled-components

Last synced: 2 days ago
JSON representation

Easy react-native forms using bootstrap-like syntax with redux-form+immutablejs integration. Styled using styled-components

Awesome Lists containing this project

README 

        
# react-native-clean-form



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

[![Dependency Status](https://david-dm.org/esbenp/react-native-clean-form.svg)](https://david-dm.org/esbenp/react-native-clean-form)

[![devDependency Status](https://david-dm.org/esbenp/react-native-clean-form/dev-status.svg)](https://david-dm.org/esbenp/react-native-clean-form#info=devDependencies&view=table)



Easy react-native forms using bootstrap-like syntax with redux-form+immutablejs integration. Styled using styled-components



## Big kudos to Artyom Khamitov



**The look of the form was [inspired by this shot by Artyom Khamitov](https://dribbble.com/shots/3151351-Checkout-form).

[Check out his profile on Dribbble](https://dribbble.com/gmax).**



---








* Form elements with syntax inspired by Bootstrap

* Styled using [styled-components](https://github.com/styled-components/styled-components). Easily extendible.

* Integrated with [redux-form](https://github.com/erikras/redux-form)

* Supports [immutable.js](https://github.com/facebook/immutable-js) state




















---



## Installation



Run `npm install --save react-native-clean-form`



The form uses `react-native-vector-icons` so it is important the fonts are linked by using `react-native link` 

[or one of the other options available](https://github.com/oblador/react-native-vector-icons#ios).



## Example



[I have written an article on my blog about React Native and redux-form](http://esbenp.github.io/2017/01/06/react-native-redux-form-immutable-styled-components/)



**[For a complete example check out the example folder](https://github.com/esbenp/react-native-clean-form/tree/master/example)**



## Usage



```javascript

import {

  ActionsContainer,

  Button,

  FieldsContainer,

  Fieldset,

  Form,

  FormGroup,

  Input,

  Label,

  Switch

} from 'react-native-clean-form'



const FormView = props => (

  

    

      

        

          First name

          

        

        

          Email

          

        

      

      

        

          Password

          

        

        

          Repeat password

          

        

        

          Save my password

          

             

      

    

    

      Save

    

  

)

```



## Usage with redux-form



```javascript

import React from 'react'

import { reduxForm } from 'redux-form'

import {

  ActionsContainer,

  Button,

  FieldsContainer,

  Fieldset,

  Form,

  FormGroup,

  Label,

} from 'react-native-clean-form'

import {

  Input,

  Switch

} from 'react-native-clean-form/redux-form'

import { View,Text } from 'react-native'



const onSubmit = (values, dispatch) => {

  return new Promise((resolve) => {

    setTimeout(() => {

      console.log(values)

      resolve()

    }, 1500)

  })

}



const FormView = props => {

  const { handleSubmit, submitting } = this.props



  return (

    

      

        

          

          

        

        

          

          

          

        

      

      

        Save

      

    

  )

}



export default reduxForm({

  form: 'Form'

})(FormView)

```



## Usage with redux-form and Immutable.js



To make it work with Immutable.js import `Input`, `Select`, and `Switch` from `react-native-clean-form/redux-form-immutable` 

instead of `react-native-clean-form/redux-form`. 

[Also, check out the included example](https://github.com/esbenp/react-native-clean-form/tree/master/example)



## Validation






If integrating with `redux-form` validation is supported right out of the box. Just add a `validation` key to `reduxForm` 

your normally would.



If not using `redux-form`, there is an `error` prop on `FormGroup` which will display the error if used.










## Async feedback






The `Button` component has a `submitting` prop. If true, a spinner will be displayed.










## Run the example



Clone the repo first.



```

git clone https://github.com/esbenp/react-native-clean-form && cd react-native-clean-form

```



Install dependencies.



```

cd example

npm install

```



Run the simulator.



```

react-native run-ios

```