react-groove v2.0.0

react-groove

React Groove is a small library that makes building sequential workflows with React easier, making it a good choice for building workflows such as multi-step forms and guided tours.

React Groove requires React 16.8+

Installation

Install React Groove using npm:

$ npm install react-groove

Or using yarn:

$ yarn add react-groove

Usage

React Groove exports a Workflow component that takes as it's children a sequential array of components representing each step of the workflow, as well as a useWorkflow React Hook that facilitates the sequence logic and binds props to Workflow

Here's a basic example:

import React from "react";
import { Workflow, useWorkflow } from "react-groove";

const steps = ["Make a workflow", "???", "Profit"];

function App() {
  const [state, { prev, next }, bind] = useWorkflow(steps, { carousel: false });
  return (
    <>
      <Workflow {...bind()}>
        {steps.map(step => (
          <pre>{step}</pre>
        ))}
      </Workflow>
      <button onClick={prev}>Previous</button>
      <button onClick={next}>Next</button>
    </>
  );
}

View in CodeSandbox

The useWorkflow hook can also accept a number as it's first argument:

const [state, actions, bind] = useWorkflow(3)

return (
  <Workflow {...bind()}>
    <p>This is step one.</p>
    <p>This is step two.</p>
    <p>This is step three.</p>
  </Workflow>
)

The workflow state object has the following shape:

{
  step: 1, // the currently active step, zero if the workflow has not been initiated
  steps: [
    null,
    null
  ], // the array of steps, values are null if number is passed in
  length: 2 // the length of the workflow
}

You can extract your workflows as well as your workflow steps to separate components and reuse them. This currently has some limitations, i.e. workflow actions being dispersed in multiple locations. This also makes it difficult to consume the workflow state from within a workflow step. React Groove exports a useWorkflowState hook that can be used within a step to consume the workflow state.

import React from 'react';
import { Workflow, useWorkflow, useWorkflowState } from 'react-groove';

const steps = [
  {
    text: 'Make a workflow'
  },
  {
    text: '???'
  },
  {
    text: 'Profit'
  }
];

const Step = ({ children, ...props }) => {
  const state = useWorkflowState();
  return (
    <p {...props}>
      Step {state.step} of {state.length}: {children}
    </p>
  );
};

const App = () => {
  const [state, { next, prev, reset }, bind] = useWorkflow(steps, {
    carousel: true
  });

  return (
    <div>
      <Workflow {...bind()}>
        {steps.map(step => (
          <Step key={step.text}>{step.text}</Step>
        ))}
      </Workflow>
      <button onClick={next}>Next</button>
      <button onClick={prev}>Previous</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};