Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/foreseaz/react-loadcon
🎈React component to manipulate the favicon, for loading or progress.
https://github.com/foreseaz/react-loadcon
Last synced: 5 days ago
JSON representation
🎈React component to manipulate the favicon, for loading or progress.
- Host: GitHub
- URL: https://github.com/foreseaz/react-loadcon
- Owner: foreseaz
- Created: 2019-03-22T18:22:54.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T16:50:05.000Z (about 2 years ago)
- Last Synced: 2025-02-07T16:13:04.488Z (14 days ago)
- Language: JavaScript
- Homepage: https://foreseaz.github.io/react-loadcon/
- Size: 2.55 MB
- Stars: 215
- Watchers: 2
- Forks: 9
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - react-loadcon
README
# react-loadcon
> React component to manipulate the favicon, as a loading or progress indicator, for now. The idea of "Favicon as DOM" is under construction.
[](https://www.npmjs.com/package/react-loadcon) [](https://standardjs.com)
## Why bother?
When it comes to a huge file loading or download in a tab, a tiny progress indicator on favicon could be an interesting but also considerate UX experience. The idea comes from a long time ago and has been realized by so many open-source developers, and it comes back to me when try to solve this [good first issue](https://github.com/mozilla/send/issues/803) for the Mozilla Send.
So here is React-LoadCon for React community, now this tiny project can only use canvas to draw dynamic images and replace the tag, which is extremely tedious, but it plans to be a more general tool to offer `Favicon as DOM`. [dom-to-img](https://github.com/tsayen/dom-to-image) could be introduced to simplify the covert process.
[Live Demo Here](https://foreseaz.github.io/react-loadcon/)
And if you find the idea interesting, [](https://spectrum.chat/favicon)
## 🚀 Installation
```bash
npm install --save react-loadcon
```
or
```bash
yarn add react-loadcon
```
## 🖲 Usage
Put `` anywhere, even in your SSR components (LoadCon would only trigger after `componentDidMount`).
```JavaScript
```
Full example with async function, and show `Success` or `Exception` afterwards.
```JavaScript
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 (
)
}
}
```
## 🧬 Props
OPTION | TYPE | DEFAULT | DESCRIPTION
------ | ---- | ------- | -----------
percentage | `number` | `0` | the percentage of loading progress for LoadCon
type | `oneOf(['pie', 'donut'])` | `pie` | the theme of LoadCon, now has `PieCon` and `DonutCon`, and more themes will be added soon
status | `oneOf(['normal', 'active', 'exception', 'success'])` | `normal` | 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 | `string` |  `#25c639` | color of loading indicator in hash format.
background | `string` |  `#eee` | color of background in hash format.
shadow | `string` |  `#fff` | color of 2 pixals border in hash format
donutWidth | `number` | `8` | width of DonutCon indicator.
## 📝 License
MIT © [foreseaz](https://github.com/foreseaz)