@cypherlab/react-flow
Flow is the glue between sequenced components.
Install
npm i @cypherlab/react-flow
Usage
import Flow, { Slot } from '@cypherlab/react-flow'
<Flow flows='one,two,three'>
{ flow => {
// build your scenario here
}}
</Flow>Scenario example:
See Live demo
See Code example
<Flow flows='item,cart,payment'>
{ flow => {
// access some flow context
const { current, prev, next } = flow.get()
return (<div>
<h2>{current.id.toUpperCase()}</h2>
<Slot target="item">
Nice T-Shirt
</Slot>
<Slot target="cart">
Total: 25$
</Slot>
<Slot target="payment">
Status: Payed !
</Slot>
{ prev.index >= 0 && <a onClick={ ()=>flow.set(-1) }>{`< Back`}</a>}
{ next.index >= 0 && <a onClick={ ()=>flow.set() }>{`Next >`}</a>}
{ current.id == 'payment' && <a onClick={ ()=>flow.set(0) }>Restart !</a>}
</div>)
}}
</Flow>Flow options
| option | info |
|---|---|
| flows | flows data. array of string. required |
| loop | if true, flow.set() will cycle back to flow 0. default false
|
| onRef | way to catch instance. onRef={ flow => (window.MyFlow = flow) }
|
Flow instance methods
get(context)
context can be one of the following values current|prev|next|flows.
If no context is specified, return an object containing all contexts.
flow.get('current')
// { id: "item", index: 0 }
flow.get('next')
// { id: "cart", index: 1 }
flow.get()
// {
// current: {...}
// , prev: {...}
// , next: {...}
// , flows: [{...},...]
// }set(index)
The set() function is used to navigate the flows.
flow.set() // next flow
flow.set(-1) // previous flow
flow.set(0,1,...) // specific flow
flow.set('initial') // initial flowSlot
| option | info |
|---|---|
| target | match flow id
|
| show | if true show anyway |
| className | apply class |
Test
You can play with the component in the browser via the index.html.
(yarn|npm) run dev