@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 flow
Slot
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