react-smart-stepper

Enhances UI with intuitive step-by-step navigation with React Smart Stepper Component.

Installation

npm

npm install react-smart-stepper

yarn

yarn add react-smart-stepper

pnpm

pnpm add react-smart-stepper

Introduction to react-smart-stepper

react-smart-stepper is a lightweight and flexible JavaScript library that enables developers to build step-by-step navigations effortlessly. Whether you're designing a multi-step form, a guided tour, or a wizard-like interface, react-smart-stepper provides the necessary tools to streamline the user experience.

Usage

1. Include the Library: Add the react-smart-stepper library to your project. You can either download the library files or include them via a CDN.
2. JSX Structure: Define the JSX structure for your stepper interface. Use div elements with appropriate classes to represent tabs, content panes, and navigation buttons.
3. Initialize the Stepper: Initialize the stepper by calling the stepper function and passing the container ID along with any optional configuration options.
4. Customize: Customize the stepper by adjusting options such as container width, indicator visibility, and callback functions for button events.

React Smart Stepper Demo

How to Utilizing the React Smart Stepper Component

import React, { useEffect, useRef, useState } from "react";
import ContextMenu from "react-smart-stepper";
import "react-smart-stepper/css/index.css";

const MyComponent = () => {
  import ReactSmartStepper from 'react-smart-stepper';
  import 'react-smart-stepper/css/index.css';

  return (
      <ReactSmartStepper
        id={1}
        className="class-name-container"
        classNameGroup="class-name-group"
        classNameBottom="class-name-bottom"
        options={{
          containerWidth: 520,
          indicatorVisible: true,
          doneProcess: true,
          nextButtonEvent: (e, options) => {
            options.nextButtonProcess(options.currentStep)
            console.log('Next button clicked!');
          },
          prevButtonEvent: (e) => {
              console.log('Prev button clicked!');
          },
          submitButtonEvent: (e) => {
              console.log('Submit button clicked!');
          },
          tabButtonEvent:(e) => {
            e.currentTarget.getAttribute('data-id');
            console.log('Next button clicked!');
          }
        }}
    >
      <StepperTabs>
        <StepperHeader>
            <h6>Tab 1</h6>
        </StepperHeader>
        <StepperHeader>
            <h6>Tab 2</h6>
        </StepperHeader>
        <StepperHeader>
            <h6>Tab 3</h6>
        </StepperHeader>
        <StepperHeader>
            <h6>Tab 4</h6>
        </StepperHeader>
      </StepperTabs>
      <StepperContent>
        <StepperPane>
            Content 1
        </StepperPane>
        <StepperPane>
            Content 2
        </StepperPane>
        <StepperPane>
            Content 3
        </StepperPane>
        <StepperPane>
            Content 4
        </StepperPane>
      </StepperContent>
    </ReactSmartStepper>
  );
};
export default MyComponent;

Props

| Name | Type | Default Value | Description | | --------------------------- | ------------------------ | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | number | 1 | Provide id for separation when using multiple React Smart Stepper Component. | | options | Options | {} | Options | | 1. containerWidth | number | 420 | Specify the container width to enable responsive tab functionality, allowing scrolling when necessary on the current screen. | | 2. indicatorVisible | boolean | false | Include indicators to provide a visual cue for the active tab number, enhancing user experience and navigation clarity. | | 3. doneProcess | boolean | false | Display indicators of completed processes for preceding tabs, ensuring users are informed about progress. | | 4. nextButtonEvent | function | | Implement functionality to respond to the 'Next' button click event, facilitating seamless progression through the navigation flow. | | 4.1. currentStep | value | | Utilize the provided value in the parameters to set the current step. This functionality is an option available within the nextButtonEvent configuration. | | 4.2. nextButtonProcess | function | | Employ the function provided in the parameters to advance to the next step upon clicking the next button. This action is facilitated through the nextButtonEvent option. | | 5. prevButtonEvent | function | | Implement functionality to respond to the 'Previous' button click event, enabling users to navigate back through the steps if needed. | | 6. submitButtonEvent | function | | Implement functionality to respond to the 'Submit' button click event, allowing users to finalize and submit their inputs or selections. | | 7. tabButtonEvent | function | | Implement functionality to respond to the 'Tab' button click event, allowing users to using tab button event handler. | | 8. className | " " | " " | Assign a class to the container element of the stepper tabs. | | 9. classNameGroup | " " | " " | Assign a class to the group element of the stepper tabs. | | 10. classNameBottom | " " | " " | Assign a class to the bottom element of the stepper. | | | 11. allTabsActive | boolean | false | Ensure that all tabs are activated upon loading the document by default. |