react-loadcon

    0.1.1 • Public • Published

    react-loadcon

    React component to manipulate the favicon, for loading or progress.

    NPM JavaScript Style Guide

    Install

    npm install --save react-loadcon

    or

    yarn add react-loadcon

    Props

    • percentage: PropTypes.number.isRequired, the percentage of loading progress for LoadCon.
    • type: PropTypes.oneOf(['pie', 'donut']), the theme of LoadCon, now has PieCon and DonutCon, and more themes will be added soon.
    • status: PropTypes.oneOf(['normal', 'active', 'exception', 'success']), load status of LoadCon, normal reset to default favicon, active set LoadCon according to the type prop, exception set ErrorCon and success set SuccessCon.
    • color: PropTypes.string, color of loading indicator in hash format, default is #25c639.
    • background: PropTypes.string, color of background in hash format, default is #eeeeee.
    • shadow: PropTypes.string, color of 2 pixals border in hash format, default is #ffffff.
    • donutWidth: PropTypes.number, width of DonutCon indicator in number, default is 8px.

    Usage

      import React, { Component } from 'react'
      import LoadCon from 'react-loadcon'
     
      export default class ExampleComponent extends Component {
        state = {
          percentage: 0,    // isRequired
          status: 'normal', // oneOf(['normal', 'active', 'exception', 'success'])
          type: 'pie',      // oneOf(['pie', 'donut'])
        }
     
        componentDidMount () {
          this.apiCall()
        }
     
        apiCall = () => {
          this.setState({ status: 'active' })
          fetch(url)
            .then(res => return res.json())
            .then(data => {
              // normal loading
              this.setState({ status: 'normal' })
     
              // loading with success
              this.setState({ status: 'success' })
              setTimeout(() => {
                this.setState({ status: 'normal' })
              }, 1500)
            })
            .catch(e => {
              this.setState({ status: 'exception' })
              setTimeout(() => {
                this.setState({ status: 'normal' })
              }, 1500)
            })
        }
     
        render () {
          return (
            <LoadCon
              percentage={this.state.percentage}
              status={this.state.status}
              type={this.state.type}
            />
          )
        }
      }

    License

    MIT © foreseaz

    Keywords

    none

    Install

    npm i react-loadcon

    DownloadsWeekly Downloads

    8

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    93.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • chenxi.zhang