React Canvas TS
A React TypeScript custom hook and canvas-wrapping component providing an interface to render 2D/3D scenes on HTML Canvas.
Installation
In your project folder, if you use npm run
npm install react-canvas-typescript
or if you use yarn
yarn add react-canvas-typescript
In your code, you can now use either the Canvas Component, or the Canvas Hook directly (if you already have your own component including a HTML Canvas element).
Usage (Canvas Component)
import React from 'react';
import Canvas from 'react-canvas-typescript';
const draw = (ctx, frameCount, elapsedTime) => {
// ...
}
const App = () => {
return (
<Canvas contextType="2d" draw={draw} />
);
};
export default App;
Usage (Canvas Hook)
import React from 'react';
import useCanvas from 'react-canvas-typescript';
const draw = (ctx, frameCount, elapsedTime) => {
// ...
}
const contextType = '2d';
const App = () => {
const canvasRef = useCanvas({draw, contextType});
return (
// note how we are returning the HTML canvas, not the React Canvas component
<canvas ref={canvasRef} />
);
};
export default App;
Props
Currently-supported props are:
-
contextType
: can be one of these three values-
2d
-> the component will reference the underlying 2D Context to draw on the Canvas element -
webgl2
-> the component will reference the underlying 3D WebGL 2 (OpenGL 3.0 support) Context to render on the Canvas element -
webgl
-> the component will reference the underlying 3D WebGL (OpenGL 2.0 support) Context to render on the Canvas element
-
-
draw
: drawing/rendering logic callback, having parameters:-
context
-> the Canvas context to render on (2D or 3D, depending on whichcontentType
was specified) -
frameCount
-> current frame number since the render loop was initialised -
elapsedTime
-> amount of time passed since last draw call, in ms
-
TypeScript
The hook and component have been developed entirely in TypeScript 4.x.
How to run tests
yarn test
How to run the example app
git clone https://github.com/sardusmatt/react-canvas-ts.git && cd react-canvas-ts/example
yarn
yarn start
The example page will be available at http://localhost:3000.