Skip to content

Latest commit

 

History

History
243 lines (188 loc) · 8.72 KB

stepper.mdx

File metadata and controls

243 lines (188 loc) · 8.72 KB
Raw
title metaTitle metaDescription githubUrl
Stepper
Stepper Component for React Bootstrap 5
React Bootstrap 5 Stepper is a component that shows content in the form of a process with user-defined milestones.

import React from 'react'; import {Link} from "gatsby";

React Bootstrap 5 Stepper

React Bootstrap 5 Stepper is a component that shows content in the form of a process with user-defined milestones. Buttons divide and connect the stages that follow.

This is an excellent option for a variety of registration forms in which you don't want to overwhelm the user with too many fields and queries.

The stepper can be positioned both vertically and horizontally.

Examples of React Bootstrap 5 steps use:

  • Registration form
  • Payment gateway
  • Tutorial with steps

Importing the Contrast React Bootstrap 5 Stepper and Step Component

Import CDBStepper into your project to use the React Bootstrap 5 Stepper component. After that, you import CDBStep. The component CDBStep is nested within the component CDBStepper. They represent the many steps of the process.

import { CDBStepper, CDBStep } from "cdbreact";

Horizontal Stepper

import React, { useState } from "react";
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";


export const Stepper = () => {
  const [active, setActive] = useState(1);

  const handleNextPrevClick = a => setActive(a);
  return (
      <CDBStepper>
        <CDBStep
          id={1}
          icon="pencil-alt"
          name="Basic Information"
          handleClick={() => handleNextPrevClick(1)}
          active={active}
          component={<Step1 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={2}
          icon="info-circle"
          name="Personal Data"
          handleClick={() => handleNextPrevClick(2)}
          active={active}
          component={<Step2 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={3}
          icon="book-reader"
          name="Terms and Conditions"
          handleClick={() => handleNextPrevClick(3)}
          active={active}
          component={<Step3 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={4}
          icon="check"
          name="Finish"
          handleClick={() => handleNextPrevClick(4)}
          active={active}
          component={<Step4 handleNextPrevClick={handleNextPrevClick} />}
        />
      </CDBStepper>
  );
};

export default Stepper;

Vertical Stepper

Pro Component

The CDBStepper accepts a direction parameter that specifies the stepper's orientation.

Alongside our CDBStepper, we also import CDBIcon for our icons, CDBInput for the input fields, and the CDBButton for our buttons.

Each CDBStep component accepts a component props that defines the component to render when that step is active

import React, { useState } from "react";
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";


export const Stepper = () => {
  const [active, setActive] = useState(1);

  const handleNextPrevClick = a => {
    setActive(a);
  };
  return (
      <CDBStepper direction="vertical" >
        <CDBStep
          id={1}
          icon="pencil-alt"
          name="Basic Information"
          handleClick={() => handleNextPrevClick(1)}
          active={active}
          component={<Step1 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={2}
          icon="info-circle"
          name="Personal Data"
          handleClick={() => handleNextPrevClick(2)}
          active={active}
          component={<Step2 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={3}
          icon="book-reader"
          name="Terms and Conditions"
          handleClick={() => handleNextPrevClick(3)}
          active={active}
          component={<Step3 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={4}
          icon="check"
          name="Finish"
          handleClick={() => handleNextPrevClick(4)}
          active={active}
          component={<Step4 handleNextPrevClick={handleNextPrevClick} />}
        />
      </CDBStepper>
  );
};

export default Stepper;

Stepper Without Icons and Headers

import React, { useState } from "react";
import { CDBStepper, CDBStep, CDBContainer } from "cdbreact";

export const Stepper = () => {

	const [active, setActive] = useState(1)

  const handleNextPrevClick = (a) => {
		setActive(a)
  };
  return (
      <CDBStepper direction="horizontal" showTitle={false} showTooltip={false}>
        <CDBStep
          id={1}
          name="Basic Information"
          handleClick={() => handleNextPrevClick(1)}
          active={active}
          component={<Step1 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={2}
          name="Personal Data"
          handleClick={() => handleNextPrevClick(2)}
          active={active}
          component={<Step2 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={3}
          name="Terms and Conditions"
          handleClick={() => handleNextPrevClick(3)}
          active={active}
          component={<Step3 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={4}
          name="Finish"
          handleClick={() => handleNextPrevClick(4)}
          active={active}
          component={<Step4 handleNextPrevClick={handleNextPrevClick} />}
        />
      </CDBStepper>
  )

};

API Reference: Contrast React Bootstrap 5 Step Props

The props you get to use with the Contrast React Bootstrap 5 Step component will be elaborated on in this section. You'll understand what these props are for, how to utilize them in your code, and what their default values are.

Other options for the 'CDBStep' are listed in the table below.

Name Type Default Description Example
className String Adds custom classes <CDBStep className="myClass" ... />
id Number Provides an ID for the step <CDBStep id={1} ... />
far, fab, fas Boolean Defines Font Awesome style. Recommend to use with icon props <CDBStep fas .../>
name String Specifies the text content within CDBStep's tooltip which is visible on hover event <CDBStep name="label" ... />
icon String Defines icon used within CDBStep <CDBStep icon="folder-open" ... />
component Node
Defines the component that shows when the step is active <CDBStep component={
} ... />

API Reference: Contrast React Bootstrap 5 Stepper Props

The props you get to use with the Contrast React Bootstrap 5 Step component will be elaborated on in this section. You'll understand what these props are for, how to utilize them in your code, and what their default values are.

Other options for the CDBStepper are listed in the table below.

Name Type Default Description Example
direction String horizontal Required! Controls the orientation of generated stepper. Can be either vertical or horizontal <CDBStepper direction="vertical" ... />
stepSize number 45 defines size of steps <CDBStepper stepSize={50} ... />
showTooltip boolean true defines whether tooltip popper is shown <CDBStepper showTooltip ... />
showTitle boolean true defines whether title is shown <CDBStepper showTitle ... />