Cacher is the code snippet organizer for pro developers

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { compose, withState, withHandlers } from 'recompose';
import {ReactEventHandler} from 'react';

interface El {
  readonly count: number;
  readonly increment: ReactEventHandler<any>;
  readonly decrement: ReactEventHandler<any>;
}

const enhance = compose<El, {}>(
  withState<{}, number, 'count', 'updateCount'>('count', 'updateCount', 0),
  withHandlers<{readonly updateCount: (cb: (a: number) => number) => void}, {}>({
    increment: (props) => () => props.updateCount(n => n + 1),
    decrement: (props) => () => props.updateCount(n => n - 1)
  })
);

const Counter = enhance(({ count, increment, decrement }) =>
  <div>
    Count: {count}
    <div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  </div>
);

const result = ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);