react-material-ui-step-loader

Stepped Progress react component using material-ui

• Overview
• Installation
• Usage
• Props API
• Developers

Overview

• Documentation
• Quick demo
• Storybook playground
• NPM
• Github

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.