react-wasm-canvas
Install
npm install --save react-wasm-canvas
Intro
WasmCanvas
is a functional component that helps you render a webGL (1,2) context coming from a WebAssembly module into a canvas.
It uses async loading through axios and keeps all the logic in sync using a store provider, in my case I use reactn which I much prefer over redux, but you can use your own.
Breaking changes since version 2.0.0
Just scroll down to see the new example, I've removed redux dependency, so you can now use your own store.
How it works
Usually you will have your wasm module (a pair of wasm and js files) somewhere around your public folder of your website, IE:
public/editor.wasmpublic/editor.js
WasmCanvas will load editor
module from public using axios asynchronously.
It will take the father element canvasContainer
as ref, that will be used internally to calculate all
sizes and scaling.
InitialRect
and initialVisibility
are used to determine those start values in case use pass a null dispatcher
, declared later.
<WasmCanvas wasmName='editor' canvasContainer={fatherRef.current} initialRect={{top: 0, left: 0, width: 0, height: 0}} initialVisibility={false}/>
WasmCanvas
supports dynamic resizing and devices pixel ratio (IE retina's display) out of the box and transparently.
WasmCanvas
parameters list
All optional:
dispatcher // I use ReactN instead of Redux but you can use what you want as long as they adhere to the pair of [state, setState] idiom
argumentList // Array of Arguments for wasm module argv argc, array
padding // canvas padding
borderRadius // canvas radius
preFilter // specify your folder if your wasm is not in public/
mandatoryWebGLVersionSupporNumber // Require a mandatory webgl version "webgl" or "weblgl2"
Usage
import React from 'react'import WasmCanvas from 'react-wasm-canvas' // I use reactn (which is awesome) but you can use what you want, as long as they return a [state,setState] pair.import useGlobal from "reactn"; const App = const wasmDispatcher = ; let canvasContainer = React; const wasmArgumentList = return <div => <WasmCanvas ="editor" = = = = = ="1px" ="5px" ="webgl2" /> </div>
License
MIT © ziocleto