react-pace-progress

    2.0.0 • Public • Published

    React Pace Progress

    React Pace Progress is a simple pace-style progressbar component.

    example

    Install

    The only way to use React-Pace-Progressbar is to install it from NPM.

    $ npm install react-pace-progress --save
    

    You need to import it and include in your own React build progress (using Webpack, e.g).

    import Pace from 'react-pace-progress'
    

    Usage

    Use Pace like any other react component. Pace renders a thin horizontal progressbar infinitely approaching 100%. It never reaches 100%.

      // inside your react component
      
      load = ()=>{
        this.setState({isLoading: true});
        fetch().then(()=>{
          // deal with data fetched
          this.setState({isLoading: false})
        })
      };
      
      render(){
        return (
          <div>
            {this.state.isLoading ? <Pace color="#27ae60"/> : null}
            ... content
          </div>
        )
      }
    

    Props

    Use props to custom Pace component.

    • height: number, progressbar height in pixels.
    • color: string, progressbar color.

    Install

    npm i react-pace-progress

    DownloadsWeekly Downloads

    263

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    5.83 kB

    Total Files

    3

    Last publish

    Collaborators

    • xieguanglei