react-smart-stepper

Enhances UI with intuitive step-by-step navigation with React Smart Stepper Component. React Smart Stepper is a versatile vanilla JavaScript library designed to simplify the implementation of step-by-step user interfaces. With React Smart Stepper, developers can create intuitive and interactive workflows, guiding users through complex processes with ease. Let's delve into the documentation to explore its features, usage, and customization options.

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 version 2.2.12 is new features, 100% faster and more flexible JavaScript library compared to the previous version, enabling developers to easily build step-by-step navigation. 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. (1.8T ops/s ± 28.77% Fastest)

Features

react-smart-stepper offers a range of features to enhance UI navigation:

1. Step-by-Step Navigation: Easily organize content into sequential steps, guiding users through a predefined workflow.
2. Intuitive Interface: The intuitive interface ensures users understand their progress and the next steps to take.
3. Customizable: Customize the appearance and behavior of the stepper to match your application's design and requirements.
4. Responsive Design: react-smart-stepper adapts seamlessly to various screen sizes, ensuring a consistent user experience across devices.

Getting Started

To start using Stepper.JS in your project, follow these simple steps:

1. Include the Library: Add the Stepper.JS library to your project. You can either download the library files.
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 <ReactSmartStepper /> and passing optional configuration options.
4. Customize: Customize the stepper by adjusting options such as container width, indicator visibility, and callback functions for button events.

Usage

React Smart Stepper Demo

How to Utilizing the React Smart Stepper Component

import React from 'react';
import ReactSmartStepper, { StepperTabs, StepperHeader, StepperContent, StepperPane } from 'react-smart-stepper';
import "react-smart-stepper/css/index.css";

const MyComponent = () => {
  return (
      <ReactSmartStepper
        className="classNameContainer"
        classNameGroup="classNameGroup"
        classNameBottom="classNameBottom"
        options={{
          containerWidth: 520,
          indicatorVisible: true,
          submitted: true,
          allTabsDisabled: true,
          containerId: (id) => {
            console.log(id);
          },
          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) => {
            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
options	Options	{}	Options
containerWidth	number	420	Specify the container width to enable responsive tab functionality, allowing scrolling when necessary on the current screen.
indicator	Object	{}	Controls indicator visibility and theme selection.
visible	Boolean	false	Provide a visual cue for the active tab number, enhancing user experience and navigation clarity.
theme	String	Default	Allows selection between Default and Classic tab themes.
allTabsDisabled	Boolean	true	Enables all tabs to be clickable on load.
containerId	Number	{{dynamic}}	Assigns a unique ID to the stepper container.
nextButtonEvent	function		Implement functionality to respond to the 'Next' button click event, facilitating seamless progression through the navigation flow.
currentStep	value		Utilize the provided value in the parameters to set the current step. This functionality is an option available within the nextButtonEvent configuration.
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.
prevButtonEvent	function		Implement functionality to respond to the 'Previous' button click event, enabling users to navigate back through the steps if needed.
submitButtonEvent	function		Implement functionality to respond to the 'Submit' button click event, allowing users to finalize and submit their inputs or selections.
tabButtonEvent	function		Implement functionality to respond to the 'Tab' button click event, allowing users to using tab button event handler.
submitted	Boolean	false	All stepper tabs become active for editing a previously submitted form. In the edit mode, the user should be able to jump between steps and make changes without restrictions
className	String	" "	Assign a class to the container element of the stepper tabs.
classNameGroup	String	" "	Assign a class to the group element of the stepper tabs.
classNameBottom	String	" "	Assign a class to the bottom element of the stepper.