React State Helpers

Installation

yarn add react-state-helpers

Higher Order Component Wrapper

You can add react-state-helpers to any project quickly and easily with the supplied decorator.

import React , { Component } from ' react ' ; import wrapStateHelpers from ' react-state-helpers ' ; import { login } from ' src/api ' ; @wrapStateHelpers export default class Example extends Component { componentDidMount ( ) { this . props . setWrappingState ( { userName : ' ' } ) ; } render ( ) { const { handleSubmit , mut , values : { userName } } = this . props ; return ( < div > Welcome , { userName } ! < form onSubmit = { handleSubmit ( login ) } > < input name = ' userName ' type = ' text ' onChange = { mut ( ' userName ' ) } / > < input name = ' password ' type = ' password ' / > < input type = ' submit ' value = ' Login ' / > < / form > < / div > ) } }

If you are on an older version of Javascript you can use the following syntax for the same results...

import React , { Component } from ' react ' ; import wrapStateHelpers from ' react-state-helpers ' ; class Example extends Component { } export default wrapStateHelpers ( Example ) ;

Mut Usage

Arguments:

string (string) : The name of the mutating property as it appears in the component state.

[function = () => {}] (function) : A preprocessing function

import React , { Component } from ' react ' ; import wrapStateHelpers from ' react-state-helpers ' ; @wrapStateHelpers export default class Example extends Component { render ( ) { const { props : { mut , values : { someKey , someNumber } } } = this ; return ( < input type = ' text ' value = { someKey } onChange = { mut ( ' someKey ' ) } / > < input type = ' number ' value = { someNumber } onChange = { mut ( ' someNumber ' , parseInt ) } / > ) ; } }

Toggle Usage

Arguments:

string (string) : The name of property to be toggled as it appears in the component state.

import React , { Component } from ' react ' ; import wrapStateHelpers from ' react-state-helpers ' ; import { Modal , Button } from ' reactstrap ' ; @wrapStateHelpers export default class Example extends Component { render ( ) { const { props : { toggle , values : { showModal } } , } = this ; return ( < div > < Button onClick = { toggle ( ' showModal ' ) } > Open < / Button > < Modal isOpen = { showModal } > < Button onClick = { toggle ( ' showModal ' ) } > { ' Cancel ' } < / Button > < / Modal > < / div > ) ; } }

HandleSubmit Usage

Arguments:

function (function) : The handler function for submitting a form.

import React , { Component } from ' react ' ; import wrapStateHelpers from ' react-state-helpers ' ; import * as actions from ' src/actions ' ; const mapStateToProps = state => state ; const mapDispatchToProps = dispatch => ( { login ( ) { dispatch ( actions . login ) ; } } ) ; @ connect ( mapStateToProps , mapDispatchToProps ) @wrapStateHelpers class Example extends Component { render ( ) { const { login , handleSubmit } = this . props ; const submit = values => login ( values . username , values . password ) ; return ( < form onSubmit = { handleSubmit ( submit ) } > < input name = ' username ' type = ' text ' / > < input name = ' password ' type = ' password ' / > < button type = ' submit ' > Login < / button > < / form > ) ; } }

Shorthand Redux

With using redux as the source of data, the first paramater of mut becomes irrelevant.

Arguments:

function (function) : A redux action that accepts the value of the input as a parameter

import React , { Component } from ' react ' ; import PropTypes from ' prop-types ' ; import { bindActionCreators } from ' redux ' ; import { connect } from ' react-redux ' ; import wrapStateHelpers from ' react-state-helpers ' ; import * as actions from ' js/actions ' ; const mapStateToProps = state => ( { someKey : state . somewhere . someKey } ) ; const mapDispatchToProps = dispatch => ( { setSomeKey : bindActionCreators ( actions . somewhere . setSomeKey , dispatch ) } ) ; @ connect ( mapStateToProps , mapDispatchToProps ) @wrapStateHelpers export default class Example extends Component { static propTypes = { someKey : PropTypes . string } render ( ) { const { someKey , setSomeKey , withValue } = this . props ; return ( < input type = ' text ' value = { someKey } onChange = { withValue ( setSomeKey ) } / > ) ; } }

Available Functions

These functions can be found in your components props after using wrapStateHelpers

findValue takes an event or value and returns the value. useful, if you want a common interface for handling events. ex: handleChange ( e ) { const value = findValue ( e ) ; this . setState ( { someKey : value } ) ; } < input value = { someKey } onChange = { handleChange } / >

mut provides a short-hand for setting a state value.

toggle set a value in the state to its inverse.

handleSubmit creates a helper that will pass in all form values to a callback function.



Want to stop using redux-forms?

Most components don't need to use redux-forms, as many inputs don't need to change the state every onChange , onKeyUp , onKeyDown etc.

Before

import { Field } from ' redux-form ' ; < Field name = ' firstName ' component = ' input ' type = ' text ' / > < Field name = ' lastName ' component = ' input ' type = ' text ' / > export default reduxForm ( { form : ' formname ' } ) ( MyComponent ) ;

After

no reliance on redux!