react-view-flow v1.3.5

React View Flow

A view/screen/component stepper with optional transition animations and URL hash state. Very flexible and extendable through suedo-controlled component API.

Inspired by this awesome project react-step-wizard

Getting Started

npm install react-view-flow

// or using yarn

yarn add react-view-flow

import { ViewFlow, Step } from 'react-view-flow'

Examples

<ViewFlow>
  <Step>
    <MyFirstScreen />
  </Step>
  <Step>
    <MySecondScreen />
  </Step>
  <Step>
    <SomeOtherComponent />
  </Step>
  ...
</ViewFlow>

Your app defines the step screens and is handed down props to control the flow

import React from 'react'

const MyFirstScreen = ({ currentStep, nextStep }) => (
    <div>
        <h1>Step # {currentStep}</h1>

        <button onClick={nextStep}>Next</button>
    </div>
)

const MySecondScreen = ({ currentStep, nextStep, previousStep }) => (
    <div>
        <h1>Step # {currentStep}</h1>

        <button onClick={previousStep}>Back</button>
        {' '}
        <button onClick={nextStep}>Next</button>
    </div>
)

const ExampleFlow = () => (
    <ViewFlow>
      <Step>
        <MyFirstScreen />
      </Step>

      <Step>
        <MySecondScreen />
      </Step>
    </ViewFlow>
)

All <ViewFlow /> Props

<ViewFlow
  hashKey="step"
  initialStep="2"
  maintainHashKey={false}
  noAnimation
  onComplete={() => {
    /* fired after last step */
  }}
  onStep={() => {
    /* fired on step change */
  }}
  instance={el => (this.viewflowRef = el)}
  transitionDirection="horizontal"
  withHashState
>
  <Step>
    <MyFirstScreen />
  </Step>
  <Step>
    <MySecondScreen />
  </Step>
  <Step>
    <SomeOtherComponent />
  </Step>
  ...
</ViewFlow>

More examples in example/ directory. Easy to run locally, pull the git repo then run npm i && npm run dev -> http://localhost:8080

<ViewFlow /> Component

The <ViewFlow /> component is the meat and potatoes of this lib. The <ViewFlow /> component must only contain <Step /> components as children.

Props

<Step /> Component

Props

The <Step /> component must be a child of <ViewFlow /> and must also contain a child component.

Props Pass to Step Children

<Step /> Child Component Props

The child component of each <Step /> has access to it's parent <ViewFlow /> state via props.

// MyStepComponent.jsx

import React from 'react'

const MyStepComponent = props => (
  <div>
    <h1>Step {props.currentStep}</h1>

    <div>Total Steps: {props.totalSteps}</div>

    <button onClick={props.previousStep}>Previous Step</button>

    <button onClick={props.nextStep}>Next Step</button>

    <button onClick={() => props.goToStep(2)}>Step 2</button>

    <button onClick={props.firstStep}>First Step</button>

    <button onClick={props.lastStep}>Last Step</button>
  </div>
)

export default MyStepComponent