Skip to content
πŸ€·β€β™‚οΈ Declarative render prop based Conditions
TypeScript HTML
Branch: master
Clone or download
Latest commit fc0cf39 Oct 25, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
example export es2015 module Sep 15, 2018
src fix Throw Oct 26, 2018
.gitignore initial commit Jul 8, 2018
.npmignore fix Throw Oct 26, 2018
.nvmrc initial commit Jul 8, 2018
.size-limit initial commit Jul 8, 2018
.travis.yml initial commit Jul 8, 2018
LICENSE LICENSE Sep 24, 2018 improve readme Aug 27, 2018
codecov.yml codecov Jul 17, 2018
package.json fix Throw Oct 26, 2018
tsconfig.json initial commit Jul 8, 2018
yarn.lock export es2015 module Sep 15, 2018


React render props at your service



Trigger - dispatch an action when some condition is true. Trigger just executes actions in the right time, in the right React Life Cycles.

import {Trigger} from 'recondition';

     when={someCondition & this.state.variable} 
     then={() => someAction(1)} 
     finally={() => someAction(0)}
  • when - boolean prop, activates Trigger
  • then - callback
  • finally - event on unmount, optional.
  • async - defer execution by one "tick", always fires, even if Trigger got unmounted, optional, overrides delay
  • delay - execution delay, if Trigger got unmounted before timeout - it will not fire, optiona


Mask - mask based selector. Masks in declaration form, like react-router. FeatureFlags, Media selectors, A/B tests - any condition based logic.

import {createMaskedProvider} from 'recondition';

// define the shape of mask
const Mask = createMaskedProvider({ flag1: true, flag2: false });

 <Mask.Case flag1> // only of flag1 is defined
   will render, as long flag1 is true
 <Mask.Case flag1 flag2>
   will NOT render, as long flag1 is true, but flag is false
 <Mask.Case flag1 flag2={false}>
   will  render, as long flag1 is true, but flag is false, but(!) we are looking for false
 // more complex example?
   <Mask.Case flag1 flag2>
      display when flags are met
      display the default, when nothing got renderer
 <Mask.Return flag1>
    { (match) => ( <div>this condition is { match ? true : false }</div>)}

By default flags are compared using strict equal, but you can override rule

const Mask = createMaskedProvider(
  { flag:'html,js,css' }, 
  { flag: (base, flag) => base.indexOf(flag)>-1}

<Mask.Case flag="html" />

You also might create your own react-router. Switch is a Switch and Case is a Route.

import {createMaskedProvider} from 'recondition';

const Mask = createMaskedProvider(
  { path: '' },
  { path: (base, right) => base.startsWith(right)}

   <Mask.Case path="">
      You are here
   <Mask.Case path="">
      Another great library!
      More to come!


LatestSource - data source "ziper". Gets multiple source as input, and provide last changed source as output. Additional feature - it would keep the last value passed thought filter(optional), making multi-source data picking easier.

Could help with controlled from more that one place components, and also capable to "Freeze", values is they are not acceptable. For example - after mouseout value from "mouse in", is not acceptable, but required for fade animation.

import {LatestSource} from 'recondition';

    x: this.state.sourceX,
    y: this.state.sourceY,
  filter={ x => x.enabled }
 {(value, real, key) => (
     current value {value.position}
     in real {value.position}
     from source {value.enabled}
  • there is GhostValue component, which does the same for a single value.

Both components are more about preserving some value, you have to preserve. Tooltips are quite good example.


Phased - the Schrodinger's state - once value changed - it will be actually changed after few phases. Useful when you have react flip some value, and have to react on that change.

Phased could be useful for animation to simulate transition, or any boolean flip which is not instant.

Accepts value and 2 optional props - phases and timeouts.

import {Phased} from 'recondition';

// semi-instant flip, but "long" enough to setup className-based animation.
<Phased value={value} phases={1}>
  {({value, nextValue, phase, phasing}) => {
    value && <SomeComponent animated={phase && nextValue}/>
// value - current value
// nextValue - target value
// phase the current "phase"
// phasing - is currently phasing. Have false values in the beginning and the end.

// one second between flips
<Phased value={value} phases={0} timeouts={[1000]}>
  {({value, nextValue, phasing}) => {
    (value || nextValue) && <SomeComponent animated={phasing}/>

Default value for a phases prop - 0, that means 1 step for "enter", and 1 step for "exit".


  • Catcher - Error Boundary based promise collector (~Suspense, experimental)
  • Thrower - Error trigger. Also could provides throw-as-children prop, to give you API to throw react-catchable messages.
import {Catcher, Throw} from 'recondition';

    onCatch = { (e:Promise<any>) => doSomething(e)}
       caught, // number of Promised caught
       pending, // is anything pending
       rejected, // is anything rejected
       resolved, // is all resolved
       results, // array of results (in the caught order)
   }) => (
       do anything async
       <Throw when={condition} what={data} />
        {thrower => thrower(data)}

catch(event filter) - is optional

Written in TypeScript



You can’t perform that action at this time.