@ribrary/stepper NPM

Introduction

Simple stepper for react. Which should the content step by step.

installation:

  npm i @ribrary/stepper

It has four components

: the main/parent component
: simple navigation buttons
: A progress bar to show an over view
: A Container to for every step
: optional sub-container for for clarity and additional feature.

Basics:

  <Stepper>
    <StepperBar rgbColor="purple"/>
    <Steps>
      <Step label="Starting">One</Step>      
      <Step label="Second step">two</Step>      
      <Step label="3rd">three</Step>      
      <Step label="fourth">four</Step>      
      <Step label="fifth">five</Step>      
      <Step label="Done">six</Step>      
    </Steps>
    <StepperNav size={50} color="rgb(255, 230, 0)" limiters={true}></StepperNav>
  </Stepper>

Customizing

<StepperBar   rgbColor="a color name in RGB", size={23} fadePercentage={23}>

rgbColor: name for color button, otherwise you can change with your following css
size: size of buttons
fadePercentage: fade on hover

Customizing

<StepperNav limiters={true} steps={true} rgbColor:"rgb(255,0,0)" size={40}  fadePercentage={32}/>

limiters: end and start buttons
steps: show all numerics steps
rgbColor: color for buttons: you can over ride with your own css
size: size of buttons

Using your own next and previous, without using and

NextStepButton
PreviousStepButton

CurrentStepButton

import {PreviousStepButton} from "@ribrary/stepper";
 <Stepper>
   <Steps>
     <div>Hello</div>
     <div>world</div>
     <div>Bye</div>
   </Steps>
 <PreviousStepButton>
     <button>Your button Previous</button>
 </PreviousStepButton>
 <CurrentStepButton>
     <button>Current</button>
 </CurrentStepButton>
 <NextStepButton>
     <button>Your button Next</button>
 </NextStepButton>
</Stepper>