awesome-react-steps

    0.1.7 • Public • Published

    React Steps

    A set of steppers components for you to use in your react projects.

    Examples

    Arrows

    default custom blue custom gold/pink custom dark custom dark

    It's only implemented Arrows stepper util now, but more steppers will be available soon. :)

    Quick usage

    The quickest way for you to use a stepper component in your project is by using a package manager to install it, and a ES6 ready environment.

    npm install awesome-react-steps
    # or 
    yarn add awesome-react-steps
    import "./node_module/awesome-react-steps/lib/css/arrows.css";
    import { Arrows } from "awesome-react-steps";
     
    //...
     
    <Arrows
      model={{
        steps: [
          { label: "Step one" },
          { label: "Step two" },
          { label: "Step three" }
        ],
        current: 0
      }}
    />;

    Advanced usage

    Coming features

    • New steppers types

    API

    StepsModel class

    import { StepsModel } from "awesome-react-steps";

    Constructing

    Intially empty and populating it later:

    let model = new StepsModel();
    model = model.addStep({ label: "First step" });

    With an array of steps:

    const model = new StepsModel([{ label: "First step" }, { label: "Last step" }]);

    With an object:

    const model = new StepsModel({
      steps: [{ label: "One step" }, { label: "Other step" }],
      current: 1
    });

    Setting step states

    // You can set the current step state using these functions
    model = model.skip();
    model = model.done();
    model = model.invalidate();
     
    // You can also set it directly
    model = model.setStepState(myNewState);

    Moving throw steps

    /// You can move around using these functions
    model = model.next();
    model = model.previous();
     
    // You can also set the current step directly
    model = model.setCurrent(2);

    StepState type

    import { StepState } from "awesome-react-steps";
    // The following states are available
    StepState.UNTOUCHED;
    StepState.DONE;
    StepState.SKIPPED;
    StepState.INVALID;

    These states are used by each stepper for rendering. Not all steppers will use all these states when rendering. But in your custom styles you can render steps using their states.

    Customizing styles

    Arrows

    The classes used for each part of the stepper:

    /* The root element of the Arrows stepper. The background should be customized in this class.  */
    .Arrows {
    }
     
    /* The element which holds a step */
    .Arrows--step {
    }
     
    /* The SVG element used to draw the arrow in the background of each step */
    .Arrows--step--arrow {
    }
     
    /* The elements for the number and the label of each step */
    .Arrows--step--number {
    }
    .Arrows--step--label {
    }

    The classes for the states of the stepper. You can combine these one with the classes of the stepper parts to custom the rendering style for different states of the stepper.

    /* Current step */
    .Arrows--step__current {
    }
     
    /* Steps before the current step */
    .Arrows--step__passed {
    }
     
    /* Steps after the current step */
    .Arrows--step__coming {
    }
     
    /* Invalid step */
    .Arrows--step__invalid {
    }
     
    /* Step is done */
    .Arrows--step__done {
    }
     
    /* Step was skipped */
    .Arrows--step__skipped {
    }

    Contributing

    Open an issue if you encounter a bug or want some new feature. We will apreciate if you write us some pull requests too.

    License

    MIT License

    Install

    npm i awesome-react-steps

    DownloadsWeekly Downloads

    88

    Version

    0.1.7

    License

    MIT

    Last publish

    Collaborators

    • bruno02221