npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

new-awesome-react-steps

v0.1.12

Published

A set of steppers components for using in react projects

Downloads

20

Readme

React Steps

license code style: prettier jest

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

Examples

Arrows

default custom blue custom gold/pink custom dark custom dark

It's implemented only the Arrows stepper until 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_modules/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
  }}
/>;

Within a controlled container

In a real project you won't actually use the quick example as shown above, you will probably use it inside a container component, for controlling state.

In this situation you better choose StepsModel object instead of plain Javascript object, because it provides some API for you to mutate your state easily.

StepsModel is immutable, its mutation functions will return new objects. You need to capture the return value and change your application state with it.

import React from "react";
import { Arrows, StepsModel } from "awesome-react-steps";

class MyContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stepsModel: new StepsModel([
        { label: "Step one" },
        { label: "Second step" },
        { label: "Another step" },
        { label: "Last step" }
      ])
    };
  }

  render() {
    return (
      <div>
        <Arrows model={this.state.stepsModel} />
        <button onClick={this.back.bind(this)}>Back</button>
        <button onClick={this.advance.bind(this)}>Advance</button>
      </div>
    );
  }

  advance() {
    this.setState(prevState => ({
      stepsModel: prevState.stepsModel.next()
    }));
  }

  back() {
    this.setState(prevState => ({
      stepsModel: prevState.stepsModel.previous()
    }));
  }
}

API

StepsModel class

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

Constructing

Without arguments:

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 {
}

Coming features

  • New steppers types

Contributing

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

License

MIT License