constructor(props) {
  super(props)
  
  this.handleChange = this.handleChange.bind(this);
  this.toggleCheckbox = this.toggleCheckbox.bind(this);
}

handleFirstNameChange(e) {
  this.setState({ firstName: e.target.value });
}

toggleCheckbox() {
  this.setState({ showModal: this.state.showModal });
} 

import React, { Component } from 'react';
import wrapStateHelpers from 'react-state-helpers';

// login could be a function that takes on object with the keys:
// userName, and password
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>
    )
  }
}

import React, { Component } from 'react';
import wrapStateHelpers from 'react-state-helpers';

class Example extends Component {
  // ... methods are the same
}
export default wrapStateHelpers(Example);

import React, { Component } from 'react';
import wrapStateHelpers from 'react-state-helpers';

@wrapStateHelpers
export default class Example extends Component {

  render() {
    // mut is a part of the props that wrapStateHelpers brings in.
    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)} />
    );
  }
}

import React, { Component } from 'react';
import wrapStateHelpers from 'react-state-helpers';
import { Modal, Button } from 'reactstrap'; // external package

@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>
    );
  }
}

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>
    );
  }
}

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)
});

// Chaining decorators is super easy!
@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)} />
    );
  }
}

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

import wrapStateHelpers from 'react-state-helpers';
// ... before class declaration
@wrapStateHelpers
// ... in render
const {
  props: { mut },
  state: { firstName, lastName }
} = this;
// ... still in render
<input
  value={firstName}
  onChange={mut('firstName')}
  type='text' />
<input
  value={lasteName}
  onChange={mut('lastName')}
  type='text' />