React-stepper

Basic react stepper component:

Demo!

Install:

1$ npm i @aspnxdd/react-stepper

Npm link

Example:

1const options: Options = {
2  squared: false,
3  color: "blue",
4  noAnimation: false,
5  distance: 9,
6};
7
8const defaultSteps: Props[] = [
9  {
10    text: "Fetching users",
11    status: "loading",
12    id: 1,
13  },
14  {
15    text: "Fetching data",
16    status: "loading",
17    id: 2,
18  },
19  {
20    text: "Uploading data",
21    status: "loading",
22    id: 3,
23  },
24];
25
26async function sleep(ms: number) {
27  return new Promise((resolve) => setTimeout(resolve, ms));
28}
29
30export default function App() {
31  const [steps, setSteps] = useState<Props[]>([]);
32
33  async function simulation() {
34    setSteps(defaultSteps);
35    await sleep(2000);
36    setSteps((e) => {
37      e[0].status = "completed";
38      return [...e];
39    });
40    await sleep(2000);
41    setSteps((e) => {
42      e[1].status = "completed";
43      return [...e];
44    });
45    await sleep(2000);
46    setSteps((e) => {
47      e[2].status = "completed";
48      return [...e];
49    });
50  }
51
52  return (
53    <>
54      <button onClick={simulation}>Simulation</button>
55      <Stepper steps={steps} options={options} />
56    </>
57  );
58}