jr-stepper-form v1.0.0

jr-stepper-form

Install

npm install --save jr-stepper-form

Usage

import React from 'react'

import { StepperForm } from 'jr-stepper-form'

const App = () => {
  const sb = (e) => {
    e.preventDefault();
    console.log('hello');
  }
  return (
    <StepperForm maxStep={5} currentStep={0} onSubmit={e => sb(e)}>
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <div>
        <h1>5</h1>
        <input type='submit' value="submit">
      </div>
    </StepperForm>
  )
}

export default App

or

import React from 'react'

import { StepperForm } from 'jr-stepper-form'

const App = () => {
  const sb = (e) => {
    e.preventDefault()
    console.log('hello')
  }
  const Step1 = () => <h1>STEP 1</h1>
  const Step2 = () => <h1>STEP 2</h1>
  const Step3 = () => <h1>STEP 3</h1>
  const Step4 = () => <h1>STEP 4</h1>
  const Step5 = () => <h1>STEP 5</h1>

  return (
    <StepperForm maxStep={5} currentStep={0} submit={(e) => sb(e)}>
      <Step1 />
      <Step2 />
      <Step3 />
      <Step4 />
      <Step5 />
    </StepperForm>
  )
}

export default App

Props

HELP

Styling previous and next button

previous and next buttons are enclosed in with class name 'btns' as such

      <div className='btns'>
        <button
          className={btnClass ? btnClass : ''}
          onClick={(e) => handlePrev(e)}
        >
          {previousText ? previousText : 'Previous'}
        </button>
        <button
          className={btnClass ? btnClass : ''}
          onClick={(e) => handleNext(e)}
        >
          {nextText ? nextText : 'Next'}
        </button>
      </div>

Styling stepper form

pass stepperClass='style-class' as props to style stepper form

License

MIT © Jamilur-rahman-470

PORTFOLIO @ Portfolio