498b01e Jan 31, 2018
1 contributor

Users who have contributed to this file

83 lines (53 sloc) 1.34 KB


Similar to <Toggle> but allows to flip the state only once using the flip method. Repeated calls to flip will have no effect. To flop the state back again, use flop method.


import {Flipflop} from 'libreact/lib/Flipflop';

<Flipflop>{({on, flip, flop}) =>
  <div onClick={flip}>{on ? 'ON' : 'OFF'}</div>



interface IFlipflopProps {
  init?: boolean;

, where

  • init - optional, boolean, initial state of the flipflop.

withFlipflop() HOC

HOC that merges flipflop prop into enhanced component's props.

import {withFlipflop} from 'libreact/lib/Flipflop';

const MyCompWithFlipflop = withFlipflop(MyComp);

You can overwrite the injected prop name

const MyCompWithFlipflop = withFlipflop(MyComp, 'foobar');

Or simply merge the whole object into your props

const MyCompWithFlipflop = withFlipflop(MyComp, '');

@withFlipflop decorator

React stateful component decorator that adds flipflop prop.

import {withFlipflop} from 'libreact/lib/Flipflop';

class MyComp extends Component {


Specify different prop name

class MyComp extends Component {


or merge the the whole object into props

class MyComp extends Component {