declarative-react-decorator-transitions withHandlers and withState

App.js

import { compose, withHandlers, withState } from 'recompose';

const App = ({toggleBox, toggleBox2, showingBox, showingBox2}) =>
  <div className="App">
    <h1>Declarative Decorator Transitions</h1>
    <button onClick={toggleBox}>TOGGLE BOX</button>
    <button onClick={toggleBox2}>TOGGLE BOX 2</button>
    <Box animationTrigger={showingBox} />
    <Box2 animationTrigger={showingBox2} />
  </div>

const enhance = compose(
  withState('showingBox', 'toggleBox', true),
  withState('showingBox2', 'toggleBox2', true),
  withHandlers({
    toggleBox: ({toggleBox}) => toggleBox((toggleBox) => !toggleBox),
    toggleBox2: ({toggleBox2}) => toggleBox2((toggleBox2) => !toggleBox2)
  })
);


export default enhance(App)