React LoadCon小白指南_React组件来操作favicon,用于加载或进度

React LoadCon小白指南

官方网址:https://foreseaz.github.io/react-loadcon/

React LoadCon小白指南_React组件来操作favicon,用于加载或进度

GitHub:https://github.com/foreseaz/react-loadcon

简介描述:React组件来操作favicon,用于加载或进度

React组件,允许您使用一系列动态生成的图像来使网站的favicon图标产生动画。这个效果可以用作进度或加载指示器,也可以作为一个很酷的小动画,使您的页面脱颖而出。  

React LoadCon安装

npm install --save react-loadcon

或者

yarn add react-loadcon

React LoadCon使用

<LoadCon percentage={this.state.percentage} />

LoadCon只会在componentDidMount中触发

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}
        />
      )
    }
  }

海计划公众号
(0)
上一篇 2020/03/06 09:10
下一篇 2020/03/06 09:10

您可能感兴趣的内容