https://github.com/tkwant/react-steps

https://github.com/tkwant/react-steps

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/tkwant/react-steps
• Owner: tkwant
• License: apache-2.0
• Created: 2021-10-14T20:09:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-08-13T07:54:08.000Z (over 2 years ago)
• Last Synced: 2024-10-25T21:19:01.775Z (3 months ago)
• Language: TypeScript
• Size: 331 KB
• Stars: 17
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-steps - [Demo](https://stepper.tkwant.de/) - Responsive React Stepper. (UI Components / Paginator)
• awesome-react-components - react-steps - [Demo](https://stepper.tkwant.de/) - Responsive React Stepper. (UI Components / Paginator)
• fucking-awesome-react-components - react-steps - 🌎 [Demo](stepper.tkwant.de/) - Responsive React Stepper. (UI Components / Paginator)
• awesome-react-components - react-steps - [Demo](https://stepper.tkwant.de/) - Responsive React Stepper. (UI Components / Paginator)
• awesome-react-components - react-steps - [Demo](https://stepper.tkwant.de/) - Responsive React Stepper. (UI Components / Paginator)

README

        
# React Stepper

React Stepper which can also be used on mobile devices

Npm Package:

https://www.npmjs.com/package/@tkwant/react-steps

Demo:

https://stepper.tkwant.de

![image](https://github.com/tkwant/react-steps/blob/main/demo.gif)

## Installation

```

yarn add @tkwant/react-steps

```

```

npm i @tkwant/react-steps

```

## Usage

```

import React, { useState } from "react";

import { Stepper, Step } from "@tkwant/react-steps";

interface Props {}

const App: React.FC = () => {

  const [curStep, setCurStep] = useState(0);

  const [step2Data, setStep2Data] = useState("");

  const renderContent = () => {

    switch (curStep) {

      case 0:

        return (

          


            First Step

          

        );

      case 1:

        return (

          


            
My Validation: 

             setStep2Data(e.currentTarget.value)}

              value={step2Data}

            />

          

        );

      default:

        return null;

    }

  };


  return (

    <>

      

        

        

        ??

        

        

        

        

      

      {renderContent()}

    >

  );

};

export default App;

```

## Stepper Props

| Prop                       | Description | Default     |

| -------------------------- | ----------- | ----------- |

| children                   |             |

| curStep                    |             |

| setCurStep                 |             |

| className                  | optional    | ""          |

| activeColor                | optional    | "#0b294b"   |

| inActiveColor              | optional    | "#D1D5DB"   |

| borderColor                | optional    | "#8fb3db"   |

| stepSize                   | optional    | 60          |

| progressBarActiveColor     | optional    | "green"     |

| progressBarBackgroundColor | optional    | "lightgray" |

| smallScreenShowProgressbar | optional    | true        |

| style                      | optional    | {}          |

## Step Props

| Prop     | Description | Default       |

| -------- | ----------- | ------------- |

| children | optional    | current Index |

| label    | optional    | ""            |

| locked   | optional    | false         |