Farmblocks-Stepper

A React component for displaying step to step actions. See Storybook

Installation

npm install @crave/farmblocks-stepper

Design Spec

See it on zeplin

Usage

Pass a list of steps to be completed, the quantity of completedSteps and a function to handle onClick.

The Stepper component will render:

• COMPLETED status from index 0 of the steps array until the index of the last completed step (completedSteps - 1);
• CURRENT status to the next step after the last completed step
• PENDING status to all remaining steps

onClick will be called only for CURRENT steps.

const React = require("react");
const ReactDOM = require("react-dom");
const Stepper = require("@crave/farmblocks-stepper").default;
const { statusTypes } = require("@crave/farmblocks-stepper");

const root = document.createElement("div");

const steps = [
  "Complete profile",
  "Add bank account",
  "Connect to purchasers",
  "Add products",
  "Start selling"
];

const completedSteps = 2;

ReactDOM.render(
  <Stepper steps={steps} completedSteps={completedSteps} onClick={({index, value}) => console.log("Handle click", index, value)} />,
  root
);

document.body.appendChild(root);

API

See it in the source

License

MIT