react-loadcon
v0.1.1
Published
React component for manipulating the favicon, for loading or progress.
Downloads
10
Readme
react-loadcon
React component to manipulate the favicon, for loading or progress.
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 hasPieCon
andDonutCon
, 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 andsuccess
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 is8px
.
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