@crave/farmblocks-stepper

A React Component for displaying step to step actions

Stats

StarsIssuesVersionUpdatedCreatedSize
@crave/farmblocks-stepper
20233.0.9a month ago4 years agoMinified + gzip package size for @crave/farmblocks-stepper in KB

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

image

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.