Package Exports

@crave/farmblocks-stepper

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@crave/farmblocks-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

logo-farmblocks

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