reCONDITION

React render props at your service

API

Trigger

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';

<div>
 <Trigger 
     when={someCondition & this.state.variable} 
     then={() => someAction(1)} 
     finally={() => someAction(0)}
     async
     delay={100}
 />
</div>

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 - 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 });

<div>
 <Mask.Case flag1> // only if flag1 is defined
   will render, as long flag1 is true
 </Mask.Case>
 
 <Mask.Case flag1 flag2>
   will NOT render, as long flag1 is true and flag2 is still false
 </Mask.Case>
  
 <Mask.Case flag1 flag2={false}>
   will render because flag1 is true and flag2 is false, but(!) we are looking for false
 </Mask.Case>
 
 // more complex example?
 <Mask.Switch>
   <Mask.Case flag1 flag2>
      display when flags are met
   </Mask.Case>
   <Mask.Default>
      display the default, when nothing got rendered
   </Mask.Default>   
 </Mask.Switch>   
 
 <Mask.Return flag1>
    { (match) => ( <div>this condition is { match ? true : false }</div>)}
 </Mask.Return>
</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: 'https://github.com/theKashey/recondition' },
  { path: (base, right) => base.startsWith(right)}
);

<div>
 <Mask.Switch>
   <Mask.Case path="https://github.com/theKashey/recondition">
      You are here
   </Mask.Case>
   <Mask.Case path="https://github.com/theKashey/faste">
      Another great library!
   </Mask.Case>
   <Mask.Default>
      More to come!
   </Mask.Default>   
 </Mask.Switch>   
</div>

LatestSource

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';

<LatestSource 
  input={{
    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}
   </>
 )}
</LatestSource>

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

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}/>
  }} 
</Phased>
// 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}/>
  }} 
</Phased>

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

Catcher

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';

<div>
 <Catcher 
    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)
   }) => (
     <div>
       do anything async
       
       <Throw when={condition} what={data} />
       
       <Throw>
        {thrower => thrower(data)}
       </Thrower>
     </div>
   )}
 </Catcher>
</div>

catch(event filter) - is optional

Written in TypeScript

Licence

MIT

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

theKashey / recondition

Programming Languages