@crave/farmblocks-stepper

    3.0.9 • Public • Published

    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

    Install

    npm i @crave/farmblocks-stepper

    DownloadsWeekly Downloads

    1,173

    Version

    3.0.9

    License

    MIT

    Unpacked Size

    20.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • seocam
    • vnakamura
    • alcferreira
    • imwra
    • juliansotuyo