Skip to content
πŸ€·β€β™‚οΈ Declarative render prop based Conditions
TypeScript HTML
Branch: master
Clone or download
Latest commit fc0cf39 Oct 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
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
README.md 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

README.md

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 of flag1 is defined
   will render, as long flag1 is true
 </Mask.Case>
 
 <Mask.Case flag1 flag2>
   will NOT render, as long flag1 is true, but flag is false
 </Mask.Case>
  
 <Mask.Case flag1 flag2={false}>
   will  render, as long flag1 is true, but flag 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 renderer
   </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 quite 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 Promised 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

You can’t perform that action at this time.