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.
; <div> <Trigger when=someCondition & thisstatevariable then= finally= async delay=100 /></div>
when
- boolean prop, activates Triggerthen
- callbackfinally
- event on unmount, optional.async
- defer execution by one "tick", always fires, even if Trigger got unmounted, optional, overrides delaydelay
- 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.
; // define the shape of maskconst Mask = ; <div> <MaskCase flag1> // only of flag1 is defined will render as long flag1 is true </MaskCase> <MaskCase flag1 flag2> will NOT render as long flag1 is true but flag is false </MaskCase> <MaskCase flag1 flag2=false> will render as long flag1 is true but flag is false we are looking for false </MaskCase> // more complex example? <MaskSwitch> <MaskCase flag1 flag2> display when flags are met </MaskCase> <MaskDefault> display the default when nothing got renderer </MaskDefault> </MaskSwitch> <MaskReturn flag1> <div>this condition is match ? true : false </div> </MaskReturn></div>
By default flags are compared using strict equal, but you can override rule
const Mask = ; <MaskCase flag="html" />
You also might create your own react-router. Switch is a Switch and Case is a Route.
; const Mask = ; <div> <MaskSwitch> <MaskCase path="https://github.com/theKashey/recondition"> You are here </MaskCase> <MaskCase path="https://github.com/theKashey/faste"> Another great library! </MaskCase> <MaskDefault> More to come! </MaskDefault> </MaskSwitch> </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.
; <LatestSource input= x: thisstatesourceX y: thisstatesourceY filter= xenabled > <> current value valueposition in real valueposition from source valueenabled </> </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
.
; // semi-instant flip, but "long" enough to setup className-based animation.<Phased value=value phases=1> { 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 && <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.
; <div> <Catcher onCatch = > 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> </div> </Catcher></div>
catch
(event filter) - is optional
Written in TypeScript
Licence
MIT