Enhances UI with intuitive step-by-step navigation with React Smart Stepper
Component.
npm
npm install react-smart-stepper
yarn
yarn add react-smart-stepper
pnpm
pnpm add 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.
-
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. - JSX Structure: Define the JSX structure for your stepper interface. Use div elements with appropriate classes to represent tabs, content panes, and navigation buttons.
- Initialize the Stepper: Initialize the stepper by calling the stepper function and passing the container ID along with any optional configuration options.
- Customize: Customize the stepper by adjusting options such as container width, indicator visibility, and callback functions for button events.
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;
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. |