# react-material-ui-step-loader > Stepped Progress react component using material-ui Latest version **1.47.0** (published 2020-05-27) · MIT license · 0 weekly downloads ## Install ```sh npm install react-material-ui-step-loader pnpm add react-material-ui-step-loader yarn add react-material-ui-step-loader bun add react-material-ui-step-loader ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 1.47.0 | | Published | 2020-05-27 | | First published | 2020-05-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 13.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Maintainers | kevincastejon | ## Links - npm: https://www.npmjs.com/package/react-material-ui-step-loader - Repository: https://github.com/kevincastejon/react-material-ui-step-loader - Homepage: https://kevincastejon.github.io/react-material-ui-step-loader/demo - npm.io page: https://npm.io/package/react-material-ui-step-loader ## Recent versions - 1.47.0 (latest) — 2020-05-27 - 1.46.0 — 2020-05-27 - 1.45.0 — 2020-05-27 - 1.44.0 — 2020-05-24 - 1.43.0 — 2020-05-24 - 1.42.0 — 2020-05-24 - 1.41.0 — 2020-05-24 - 1.40.0 — 2020-05-24 - 1.37.0 — 2020-05-23 - 1.35.0 — 2020-05-23 - 1.34.0 — 2020-05-23 - 1.33.0 — 2020-05-23 - 1.32.0 — 2020-05-23 - 1.31.0 — 2020-05-23 - 1.30.0 — 2020-05-23 - … 6 more at https://npm.io/package/react-material-ui-step-loader/versions ## README # react-material-ui-step-loader ![npm_version](https://img.shields.io/npm/v/react-material-ui-step-loader) ![license](https://img.shields.io/npm/l/react-material-ui-step-loader) Stepped Progress react component using material-ui ![react-material-ui-step-loader preview](https://repository-images.githubusercontent.com/266265119/acafbf00-9d1e-11ea-9822-9d17c06713a0) ----- - **[Overview](#overview)** - **[Installation](#install)** - **[Usage](#usage)** - **[Props API](#propsapi)** - **[Developers](#dev)** ----- ## Overview - [Documentation](https://kevincastejon.github.io/react-material-ui-step-loader/) - [Quick demo](https://kevincastejon.github.io/react-material-ui-step-loader/demo) - [Storybook playground](https://kevincastejon.github.io/react-material-ui-step-loader/storybook) - [NPM](https://www.npmjs.com/package/react-material-ui-step-loader) - [Github](https://github.com/kevincastejon/react-material-ui-step-loader.git) ## 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' }, ]; // ... ``` ## 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**. --- _Source: https://npm.io/package/react-material-ui-step-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._