@cypherlab/react-flow v0.0.9

@cypherlab/react-flow

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

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

Test

You can play with the component in the browser via the index.html.

(yarn|npm) run dev