Redraw
Canvas + JSX + Hooks
Getting started
Install Redraw:
npm i @jchn/redraw
Configure Babel
You can use JSX to create your views, to do this you need to configure babel to use Redraw's createElement function.
Drawing a rectangle on the canvas
import { render, createElement as h } from '@jchn/redraw'
/* @jsx h */
const view = (
<rectangle x={10} y={10} width={50} height={50} />
)
// obtain the CanvasRenderContext2D object
const ctx = document.querySelector('canvas').getContext('2d')
// mount the application by passing the view and the context to Redraw's render function
render(ctx, view)Components
You can create your own components by creating functions:
const MyRectangle = ({ x, y, width, height, children }) => {
return (
<rectangle x={x} y={y} width={width} height={height}>
{children}
</rectangle>
)
}Events
You can add events to elements by using props like onClick:
const view = (
<rectangle x={10} y={10} width={50} height={50} onClick={e => {
console.log('click!')
}} />
)Note: not alle events are yet supported
Hooks
Currently you can only use the useState hook, more hooks to come!
import { useState } from '@jchn/redraw'
const MyRectangle = ({ x, y, width, height, children }) => {
const [count, setCount] = useState(0)
return (
<rectangle x={x} y={y} width={width} height={height} onClick={() => {
setCounter(count + 1)
}}>
clicked {count} times!
</rectangle>
)
}