Render Prop Condition
npm install reconditionjs
import {Trigger} from 'recondition';
when={someCondition & this.state.variable}
then={() => someAction(1)}
finally={() => someAction(0)}
async
delay={100}
/>
`
- 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.
`js
import {createMaskedProvider} from 'recondition';// define the shape of mask
const Mask = createMaskedProvider({ flag1: true, flag2: false });
// only of flag1 is defined
will render, as long flag1 is true
will NOT render, as long flag1 is true, but flag is false
will render, as long flag1 is true, but flag is false, but(!) we are looking for false
// more complex example?
display when flags are met
display the default, when nothing got renderer
{ (match) => ( this condition is { match ? true : false })}
`By default flags are compared using strict equal, but you can override rule
`js
const Mask = createMaskedProvider(
{ flag:'html,js,css' },
{ flag: (base, flag) => base.indexOf(flag)>-1}
);
`You also might create your own react-router. Switch is a Switch and Case is a Route.
`js
import {createMaskedProvider} from 'recondition';const Mask = createMaskedProvider(
{ path: 'https://github.com/theKashey/recondition' },
{ path: (base, right) => base.startsWith(right)}
);
You are here
Another great library!
More to come!
`
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.
`js
import {LatestSource} from 'recondition'; 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}
>
)}
`+ 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.
`js
import {Phased} from 'recondition';// semi-instant flip, but "long" enough to setup className-based animation.
{({value, nextValue, phase, phasing}) => {
value &&
}}
// 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
{({value, nextValue, phasing}) => {
(value || nextValue) &&
}}
` 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.
`js
import {Catcher, Throw} from 'recondition';
onCatch = { (e:Promise) => 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
{thrower => thrower(data)}
)}
`
catch`(event filter) - is optional