step-process-bar

A simple step process bar component for React.

built by Yehonatan Refael Cohen

Installation

npm install step-process-bar use-mobile-detect-hook

use-mobile-detect-hook is a dependency that provides a hook to detect if the user is on a mobile device. It is used to adjust the component's behavior accordingly.

Usage

import React from 'react';
import ProcessBar from 'step-process-bar';
import 'step-process-bar/dist/index.css'; // Import the CSS for styling 
const App = () => {
  return (
    <div>
      <ProcessBar
         config={[
        { label: 'Step 1',component: () => <div>Step 1 Content</div> , functionInNextStep: () => true },
        { label: 'Step 2', component: () => <div>Step 2 Content</div>, functionInNextStep: () => true },
        { label: 'Step 3', component: () => <div>Step 3 Content</div>, functionInNextStep: () => true }
        ]}/>
    </div>
  );
};
export default App;

Properties

| Property | Type | Description | |--------------------|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| label | string | The label for the step. this is displayed in the step indicator. | | component | () => ReactNode | The component to render for the step. important to note that the property is a function that returns a ReactNode. not a ReactNode itself. | | functionInNextStep | () => boolean | A function that is called when the user clicks on the next button. if the function returns true, the user can proceed to the next step. if it returns false, the user cannot proceed to the next step. |

Example