Render Children with State Handlers

usage.js

import withStateHandlers from 'withStateHandlers';

const initialState = {
  value: '',
}

const handlersFactory = ({ props, state, setState }) => {
  return {
    setValue(value) {
      setState({ value });
    }
  }
}

const State = withStateHandlers({ initialState, handlersFactory });

export default props => (
  <State>
  {({ value }) => <input type="text" value={value} onChange={setValue} />}
  </State>
);

withStateHandlers.js

import { PureComponent } from 'react';
import PropTypes from 'prop-types';

export default function withStateHandlers({
  initialState,
  defaultProps,
  handlersFactory,
}) {
  return class WithStateHandlers extends PureComponent {
    static propTypes = {
      children: PropTypes.func,
    };
    static defaultProps = defaultProps;

    state = initialState;
    setState = this.setState.bind(this);

    render() {
      this.handlers = handlersFactory({
        props: this.props,
        setState: this.setState,
        state: this.state,
      });

      return this.props.children({
        setState: this.setState,
        ...this.state,
        ...this.handlers,
      });
    }
  };
}