Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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


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

Last synced: 2 months ago
JSON representation

Lists

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         |