React Stepper Component Simple

React stepper component with mobile and desktop config.

!Stepper example

How it works

- The acts as a wrapper and the is a wrapper for each step.

How to use

$3

Installation: npm install react-stepper-component-simple

$3

Import the package into your app:

import { StepperComponent, StepperItemComponent } from "react-stepper-component-simple";

#### Component Example:
``



                    stepNumberBackgroundColour="#2C514C" 

            stepNumberTextColour="white" 

            stepNumberWidth="24px"

            stepNumberHeigth="24px"

            buttonStyles={{padding: "1rem 2rem", border: 0, backgroundColor: "#2C514C", color: "white"}}

            contentWrapperStyles={{padding: "1rem"}}

            stepTitleDirectionMobile="column"

            stepTitleDirectionDesktop="row"

            mobileBreakpoint={768}

        >

            

                

                    Step one content

                    

                    Cras vel dui molestie, condimentum urna ac, lacinia ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum, sapien ut rhoncus aliquam, ante metus auctor ante, ut pharetra purus dolor vitae ante. Aenean rhoncus eu leo non fermentum.

                    

                

            



            

                

                    Step Two content

                    

                    Cras vel dui molestie, condimentum urna ac, lacinia ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum, sapien ut rhoncus aliquam, ante metus auctor ante, ut pharetra purus dolor vitae ante. Aenean rhoncus eu leo non fermentum.

                    

                

            



            

                

                    Step three content

                    

                    Cras vel dui molestie, condimentum urna ac, lacinia ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum, sapien ut rhoncus aliquam, ante metus auctor ante, ut pharetra purus dolor vitae ante. Aenean rhoncus eu leo non fermentum.

stepNumberBackgroundColour="#2C514C"



        Step number background colour.



    -

stepNumberTextColour="white"



        Step number text colour.



    -

stepNumberWidth="24px"

 

        Step number width.



    -

stepNumberHeigth="24px"



        Step number height.



    -

buttonStyles={{padding: "1rem 2rem", border: 0, backgroundColor: "#2C514C", color: "white"}}



        Prev and next button styles.



    -

contentWrapperStyles={{padding: "1rem"}}



        Content wrapper styles.



    -

stepTitleDirectionMobile="column"



        Step title flex direction mobile.



    -

stepTitleDirectionDesktop="row"



        Step title flex direction desktop.



    -

mobileBreakpoint={768}`
Mobile breakpoint.