Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanhefner/react-canvas-wrapper
🖼 React component that wraps a canvas element and offers a clean API for drawing.
https://github.com/ryanhefner/react-canvas-wrapper
canvas react react-component
Last synced: 4 months ago
JSON representation
🖼 React component that wraps a canvas element and offers a clean API for drawing.
- Host: GitHub
- URL: https://github.com/ryanhefner/react-canvas-wrapper
- Owner: ryanhefner
- License: mit
- Created: 2018-03-05T22:21:37.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-13T13:30:45.000Z (over 1 year ago)
- Last Synced: 2024-10-05T18:16:47.528Z (5 months ago)
- Topics: canvas, react, react-component
- Language: JavaScript
- Homepage: https://www.pkgstats.com/pkg:react-canvas-wrapper
- Size: 1.45 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 🖼 react-canvas-wrapper
React component that wraps a canvas element and offers a clean API for drawing.
## Install
Via [NPM](https://npmjs.com/package/react-canvas-wrapper)
```sh
npm install --save react-canvas-wrapper
```
Via [Yarn](https://yarn.fyi/react-canvas-wrapper)
```sh
yarn add react-canvas-wrapper
```
## How to use
**Properties**
* `canvasRef:Function` - Function to set reference to `` element. (Default: `(element) => { this.canvas = element; }`)
* `draw:Function` - Callback called when props change on the component. (Default: `(canvas) => {}`)
* `width:Number` - Width of the canvas @ 1x. (Default: `30`)
* `height:Number` - Height of the canvas @ 1x. (Default: `30`)
* `pixelRatioAware:Boolean` -Â Flag that triggers whether or not the `` should be sized contextually based on the `devicePixelRatio`. (Default: `true`)
**Example - Canvas `ref`**
```js
import {Canvas} from 'react-canvas-wrapper';
...
componentWillReceiveProps(nextProps) {
this.refreshCanvas();
}
refreshCanvas() {
const canvas = ReactDOM.findDOMNode(this.canvas);
const context = canvas.getContext('2d');
/**
* ...Perform canvas magic here...
*/
}
render() {
return (
{ this.canvas = element; }} />
);
}
```
**Example - Custom `draw` method**
```js
import {Canvas} from 'react-canvas-wrapper';
...
constructor(props) {
super(props);
this.draw = this.draw.bind(this);
}
draw(canvas) {
const node = ReactDOM.findDOMNode(canvas);
const context = node.getContext('2d');
if (!context) {
return;
}
const {
progress,
} = this.props;
const pixelRatio = window.devicePixelRatio || 1;
const width = 30 * pixelRatio;
const height = 30 * pixelRatio;
const backgroundColor = 'grey';
const color = 'black';
context.clearRect(0, 0, width, height);
context.fillStyle = backgroundColor;
context.beginPath();
context.arc(
(width / 2),
(height / 2),
(width / 2),
0,
Math.PI * 2
);
context.fill();
context.fillStyle = color;
context.beginPath();
context.arc(
(width / 2),
(height / 2),
((width * progress) / 2),
0,
Math.PI * 2
);
context.fill();
}
render() {
return (
);
}
...
```
## Responsive Canvas
This component recognizes 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, assuming that you haven’t set the `pixelRatioAware` to `false`.
So, feel free to set the size or dimensions based on a `1x` scale and the component
will adjust those accordingly.
Although, keep in mind that if you decide to pass in your own custom `draw` function
you’ll have to account for the `devicePixelRatio` within your drawing commands.
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)