Nighttime Possum Meandering

    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.

    Keywords

    none

    Install

    npm i react-material-ui-step-loader

    DownloadsWeekly Downloads

    30

    Version

    1.47.0

    License

    MIT

    Unpacked Size

    13.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • kevincastejon