JSPM – @aspnxdd/react-stepper@0.0.1

Package Exports

@aspnxdd/react-stepper
@aspnxdd/react-stepper/dist/Stepper.js

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 (@aspnxdd/react-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-stepper

Basic react stepper component:

Demo!

Install:

$ npm i @aspnxdd/react-stepper

Npm link

Example:

const options: Options = {
  squared: false,
  color: "blue",
  noAnimation: false,
  distance: 9,
};

const defaultSteps: Props[] = [
  {
    text: "Fetching users",
    status: "loading",
    id: 1,
  },
  {
    text: "Fetching data",
    status: "loading",
    id: 2,
  },
  {
    text: "Uploading data",
    status: "loading",
    id: 3,
  },
];

async function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

export default function App() {
  const [steps, setSteps] = useState<Props[]>([]);

  async function simulation() {
    setSteps(defaultSteps);
    await sleep(2000);
    setSteps((e) => {
      e[0].status = "completed";
      return [...e];
    });
    await sleep(2000);
    setSteps((e) => {
      e[1].status = "completed";
      return [...e];
    });
    await sleep(2000);
    setSteps((e) => {
      e[2].status = "completed";
      return [...e];
    });
  }

  return (
    <>
      <button onClick={simulation}>Simulation</button>
      <Stepper steps={steps} options={options} />
    </>
  );
}