react-material-ui-step-loader

!npm_version
!license

Stepped Progress react component using material-ui

!react-material-ui-step-loader preview

-----

- Overview
- Installation
- Usage
- Props API
- Developers

-----

Overview

- Documentation
- Quick demo
- Storybook playground
- NPM
- Github

Installation

``bash
npm install react-material-ui-step-loader
`

Usage

`javascript

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' },
];
// ...

steps={steps}
currentStep={2}
currentProgress={75}
/>
`





Props API




$3

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

$3


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)

$3


#### 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.}