@blaze-react/progress

0.7.0 • Public • Published

Description

The progress bar, despite providing a good user experience, also helps users avoid frustration and successfully complete all the steps.

Usage

  • Progress dot indicators
const steps = [
  'Cart', 'Billing', 'Delivery', 'Review & pay'
];

<Progress 
  progress={2} 
  onChange={({event, step}) => {}}
  steps={steps}/>
  • Progress dot indicators + steps counter
<Progress
   progress={3} 
   type="count" 
   onChange={({event, step}) => {}} 
   steps={steps}/>
  • Progress text
<Progress 
    progress={1} 
    type="text" 
    onChange={({event, step}) => {}}
    steps={steps}/>
  • Progress + text + completed icon
<Progress 
    progress={4} 
    type="text icon" 
    onChange={({event, step}) => {}} 
    steps={steps}/>

API

Progress can receive a number of props as follow:
NAME TYPE DEFAULT
steps Array []
progress Number 0
type Text dots
onChange Function () => {}

Dependencies (0)

    Dev Dependencies (3)

    Package Sidebar

    Install

    npm i @blaze-react/progress

    Weekly Downloads

    2

    Version

    0.7.0

    License

    ISC

    Unpacked Size

    6.24 kB

    Total Files

    4

    Last publish

    Collaborators

    • mcabrerapf
    • tanane
    • daoyong
    • marekb9
    • grzegorzi
    • ishrat
    • andypail