Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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 if flag1 is defined
   will render, as long flag1 is true
 <Mask.Case flag1 flag2>
   will NOT render, as long flag1 is true and flag2 is still false
 <Mask.Case flag1 flag2={false}>
   will render because flag1 is true and flag2 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 rendered
 <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 a 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 Promises 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




πŸ€·β€β™‚οΈ Declarative render prop based Conditions







No releases published


No packages published