https://github.com/surinderlohat/react-stepper-wizard

Simple Wizard component for react based applications when we needs to show components in steps
https://github.com/surinderlohat/react-stepper-wizard

Last synced: 26 days ago
JSON representation

Simple Wizard component for react based applications when we needs to show components in steps

• Host: GitHub
• URL: https://github.com/surinderlohat/react-stepper-wizard
• Owner: surinderlohat
• License: mit
• Created: 2022-06-09T07:27:58.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-09T13:17:04.000Z (over 2 years ago)
• Last Synced: 2024-11-28T23:37:42.135Z (about 1 month ago)
• Size: 3.91 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Stepper Wizard

A simple highly customizable Wizard component for displaying pages in react app.

##### Based on the React hooks and reactive programing.

#### No extra dependencies pure react js code & lightweight.

## Features

1. Easily handel user cases for wizard.

2. Provide highly customization to fit in all major User cases.

3. Super Easy to use.

4. Open source Free to use.

## Installation

```sh

npm install @surinderlohat/react-stepper-wizard

or

yarn add @surinderlohat/react-stepper-wizard

```

## How to use

```sh

import { StepperWizard } from '@surinderlohat/react-stepper-wizard';

import { FC } from 'react';

const BasicExample: FC = () => {

  return (

    


       {

          console.log('onStepChange', activeStep);

        }}

      >

        
Step 1

        
Step 2

        
Step 3

        
Step 4

        
Step 5

        
Step 6

      

    

  );

};

export default BasicExample;

```

## API Documentation

```

{

  children?: ReactChild;

  

  /* starting step of wizard */

  defaultStep?: number;

  

  /* current active step*/

  activeStep?: number;

  

  /**Place action buttons on bottom or top or pass hidden if want to use your own actions*/

  actionsPlacement?: 'bottom' | 'top' | 'hidden';

  

  /**used to access StepperWizard hook in parent component case if wants to control using the parent component

   * i.e const hookRef = useRef();

   * 


   * 

   * 

   * 

   * 

   * hookRef.current?.goToSpecificStep(2)}>

   *  Got Step 2

   * 

   * 

   */

  hookRef?: Ref;

  

  /**Return current active step */

  onStepChange?: (activeStep: number) => void;

  

  /**

   * Render custom action buttons i.e if your application need some custom action button UI

   * param : state useStepperWizard hook state to control navigation

   * props : props provided by the component in which we are using it

   */

  renderCustomActions?: (state: any, props: any) => ReactNode;

  

  /**Name for back button*/

  previousButtonName?: string;

  

  /**Name for next button*/

  nextButtonName?: string;

  

  /**Perform custom control for previous button click*/

  onPreviousButtonClick?: Function;

  

  /**Perform custom control for next button click*/

  onNextButtonClick?: Function;

  

  /**Change color of the action buttons*/

  actionButtonsColor?: string;

  

  /**Pass classes to child's for UI customization*/

  classes?: {

    rootDiv?: string;

    actionButtonContainer?: string;

    prevActionButton?: string;

    nextActionButton?: string;

  };

  

  /**Pass styles to child's for UI customization*/

  styles?: {

    rootDiv?: React.CSSProperties;

    actionButtonContainer?: React.CSSProperties;

    prevActionButton?: React.CSSProperties;

    nextActionButton?: React.CSSProperties;

  };

};

```

## License

MIT **Free Software!**