Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanhefner/react-indicators
Responsive, canvas-based indicators that you can use to communicate the progress of loaders, timers or whatever else you might need a progress indicator for.
https://github.com/ryanhefner/react-indicators
canvas indicators progress-bar progress-circle react react-components responsive
Last synced: 2 days ago
JSON representation
Responsive, canvas-based indicators that you can use to communicate the progress of loaders, timers or whatever else you might need a progress indicator for.
- Host: GitHub
- URL: https://github.com/ryanhefner/react-indicators
- Owner: ryanhefner
- License: mit
- Created: 2017-06-26T16:03:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-01-12T18:45:21.000Z (over 2 years ago)
- Last Synced: 2024-09-13T02:28:48.261Z (20 days ago)
- Topics: canvas, indicators, progress-bar, progress-circle, react, react-components, responsive
- Language: JavaScript
- Homepage: https://www.pkgstats.com/pkg:react-indicators
- Size: 1.54 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-indicators
Simple, [responsive](#responsive-canvas), canvas-based indicators that
you can use to communicate the progress of loaders, timers or whatever else you
might need a progress indicator for.
~~In addition to the pre-built indicators, this library includes a generic `Canvas`
component that you can pass a custom `draw` function to, or access the ``
element via a `ref`, and go nuts with your own canvas design goodness!~~
**Update:** I’ve moved the `Canvas` component to its own repo/package because I was finding myself needing it for cases where I didn’t need the indicators. This package now relies on `react-canvas-wrapper` as a dependency. You can check it out here: [react-canvas-wrapper](https://github.com/ryanhefner/react-canvas-wrapper)
## Install
Using [npm](https://npmjs.com/package/react-indicators):
```sh
npm install --save react-indicators
```
Using [Yarn](https://yarn.fyi/react-indicators):
```sh
yarn add react-indicators
```
Once you’ve added `react-indicators` to your project, you can use it just like you
would any other package you have installed.
```js
// using ES6 modules
import { CircleIndicator } from 'react-indicators';
// using CommonJS modules
var CircleIndicator = require('react-indicators').CircleIndicator;
```
## Indicators
The library consists of two common indicator components, `BarIndicator` and `CircleIndicator`. Below are examples of how you can use each component, along with the properties that they support.
### ``
**Properties**
* `progress:Number` - Progress to represent in the indicator, `0` to `1`. (Default: `0`)
* `size:Number` - Size, width/height, of the indicator. (Default: `30`)
* `fill:String` - Color used to fill the progress portion indicator. (Default: `'transparent'`)
* `fillBackground:String` - Color used to fill the empty, non-progress, portion of the indicator. (Default: `'transparent'`)
* `stroke:String` - Color for the stroke of the progress portion of the indicator. (Default: `'black'`)
* `strokeBackground:String` - Color for the stroke of the empty, non-progress, portion of the indicator. (Default: `'white'`)
* `strokeWidth:Number` - Width of the stroke. (Default: `2`)
**Example**
```js
import { CircleIndicator } from 'react-indicators';
...
render() {
const {
progress,
} = this.state;
return (
);
}
...
```
### ``
**Properties**
* `progress:Number` - Progress to represent in the indicator, `0` to `1`. (Default: `0`)
* `width:Number` - Width of the indicator @ 1x. (Default: `45`)
* `height:Number` - Height of the indicator @ 1x. (Default: `5`)
* `color:String` - Color of the progress portion of the indicator. (Default: `'black'`)
* `backgroundColor:String` - Background color of the empty, non-progress, portion of the indicator. (Default: `'transparent'`)
**Example**
```js
import { BarIndicator } from 'react-indicators';
...
render() {
const {
progress,
} = this.state;
return (
);
}
...
```
## Responsive Canvas
All components recognize the `devicePixelRatio` of the device/browser they are running
in, so the canvas is properly sized in order to keep the graphics crisp and clean.
So, feel free to set the size or dimensions based on a `1x` scale and the component
will adjust those accordingly.
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)