Steps

Steps is a navigation component that guides users through the steps of a task. When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.

Props

Props	Type	Required	Description
steps	Array<StepsDataProps>	Yes	It is an array of StepsDataProps objects
activeStep	number	Yes	It is the active step index

StepsDataProps

Each object in the steps array will be used to render a step. Every step object should be of the following type.

Props	Type	Required	Description
title	string	Yes	It is the title of the step
content	ReactNode	Yes	The content that will be rendered when a particular step is active

http://localhost:3000

1

User details

2

Payment

3

Address

4

Booking confirmation

Dummy Component-1

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Next

src/components/ExampleSteps/index.tsx

import React, { useState } from "react";
import {
  DummyComponent1,
  DummyComponent2,
  DummyComponent3,
  Button,
  Steps,
  StepsDataProps,
} from "canary-design";

const steps: StepsDataProps[] = [
  {
    title: "User details",
    content: <DummyComponent1 />,
  },
  {
    title: "Payment",
    content: "Second-content",
  },
  {
    title: "Address",
    content: <DummyComponent2 />,
  },
  {
    title: "Booking confirmation",
    content: <DummyComponent3 />,
  },
];

const ExampleSteps = () => {
  const [activeStep, setActiveStep] = useState(0);

  const stepsContentStyle: React.CSSProperties = {
    borderRadius: "8px",
    marginTop: "1rem",
    padding: "10px",
    border: "1px dotted",
    backgroundColor: "rgba(0, 0, 0, 0.02)",
    minHeight: "300px",
  };

  const navigationButtonsStyle: React.CSSProperties = {
    marginTop: "1rem",
    display: "flex",
    gap: "0.5rem",
  };

  return (
    <div style={{ padding: "5px" }}>
      <Steps steps={steps} activeStep={activeStep} />
      <div style={stepsContentStyle}>{steps[activeStep].content}</div>
      <div style={navigationButtonsStyle}>
        <Button
          type="fill"
          onClick={() => {
            if (activeStep !== steps.length - 1)
              return setActiveStep(activeStep + 1);
            alert("Canary Design is awesome!");
          }}
        >
          {activeStep === steps.length - 1 ? "Finish" : "Next"}
        </Button>
        {activeStep !== 0 && (
          <Button onClick={() => setActiveStep(activeStep - 1)}>
            Previous
          </Button>
        )}
      </div>
    </div>
  );
};

export { ExampleSteps };