react-material-ui-step-loader

1.47.0 • Public • Published

react-material-ui-step-loader

npm_version license

Stepped Progress react component using material-ui

react-material-ui-step-loader preview



Overview

Installation

npm install react-material-ui-step-loader

Usage

 
import { StepLoader } from 'react-material-ui-step-loader';
const steps = [
  { label: 'Authenticating', labelAfter: 'Authenticated' },
  { label: 'Checking updates', labelAfter: 'Updated', labelError: 'No update found' },
  { label: 'Formatting message', labelAfter: 'Message formatted', labelSkip: 'Already formatted' },
  { label: 'Posting message', labelAfter: 'Message posted' },
  { label: 'Verifying', labelAfter: 'Verified' },
];
// ...
 
<StepLoader
  steps={steps}
  currentStep={2}
  currentProgress={75}
/>

Props API

StepLoader

Stepped LinearProgress component using material-ui

Property Type Required Default value Description
steps arrayOf yes An array of 'step' object with the following shape (label:string, [labelAfter:string],[labelSkip:string],[labelError:string],[color:string "primary"|"secondary"]).
currentStep number yes The current step.
height number no 2 The LinearProgress height.
color enum no The color of the progress bars.
variant enum no The variant type for the LinearProgress outline. 'square' | 'rounded' | 'round'
currentProgress number no -1 The current progress [0-100] of the current step. If ommited the LinearProgress will use the 'undeterminate' variant.
errors arrayOf no An array of int representing the failed steps.
skips arrayOf no An array of int representing the skipped steps.

Developers

Development

You should use YARN for development as NPM seems to be causing some issues! (Using NPM for just installing and using as a component is OK)

Demo app

  • yarn start for live-testing the demo app

Storybook

  • yarn storybook for live-testing the storybook app

GitHub Page

  • yarn github-page for testing a temporary build of the full github-page without an possible theme that you will choose later on GitHub (no live-testing)

Prod

Generate Readme.md

  • yarn generate-readme

Will generate a readme according to your package.json info and the following files :

    • setup_readme.md (if not present, it will use the default npm i YOUR_PACKAGE_NAME)
    • usage_readme.md
    • dev_readme.md

You can then edit your readme.md file if you need to before building/publishing/deploying

NPM

  • yarn publish

Will transpile and publish to npm, it will prompt you the version incrementing.

GitHub Page

  • yarn build

Will build the static demo and storybook apps for prod into the build folder

  • yarn deploy-github-page

Will deploy the built apps from 'build' folder to the 'gh-pages' github branch

Helper scripts

  • yarn build-and-deploy This helper script will call all the scripts for a complete GitHub building and deploying (yarn build && yarn deploy-github-page)
  • yarn publish-build-and-deploy This helper script will call all the scripts for a complete NPM and GitHub transpiling/building and publishing/deploying (yarn publish && yarn build-and-deploy)

You should then commit and push sources on GitHub the usual way.

This document was generated by the Create React Readme v1.0.7.

Readme

Keywords

none

Package Sidebar

Install

npm i react-material-ui-step-loader

Weekly Downloads

22

Version

1.47.0

License

MIT

Unpacked Size

13.4 kB

Total Files

7

Last publish

Collaborators

  • kevincastejon