https://github.com/jcblw/react-scribble

React scribble is a react component that allows you to draw to the canvas using hooks.
https://github.com/jcblw/react-scribble

canvas creative-coding react

Last synced: 2 months ago
JSON representation

React scribble is a react component that allows you to draw to the canvas using hooks.

• Host: GitHub
• URL: https://github.com/jcblw/react-scribble
• Owner: jcblw
• Created: 2020-06-18T06:34:35.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T01:11:02.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T14:38:39.729Z (3 months ago)
• Topics: canvas, creative-coding, react
• Language: TypeScript
• Homepage: https://react-scribble.jcblw.vercel.app/
• Size: 1.19 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ✍️ React Scribble

React scribble is a react component that allows you to draw to canvas using hooks. This means that you can write individual component to draw a canvas in a declarative way.

[Site](https://react-scribble.jcblw.vercel.app)

![example of scribble](./assets/example.gif)

## Why

Using canvas, and using the canvas api is fun. I had this idea of composing different canvas element together without nerfing the canvas api. This allows full access to the canvas api.

## Install

```shell

npm install react-scribble --save

# or

yarn add react-scribble

```

## Usage

You will need to setup the canvas and then use hooks to access the draw function.

### Setting up a canvas

Scribble outputs a component called Canvas. Render it and give it a height and width.

```javascript

import { Canvas } from 'react-scribble'

const MyCoolAppComponent = () => {

  return (

    

      {/* my projects components */}

    

  )

}

```

### Hooking into the draw

The hook allows you to pass a function to the useDraw hook, and that hook will be called every time the canvas is drawn.

```javascript

import { useCallback } from 'react'

import { useDraw } from 'react-scribble'

const Circle = ({ x, y }) => {

  // TEMP: draw functions currently need something

  // to stop the reference to stop updating

  const drawCircle = useCallback(

    (ctx, canvas) => {

      ctx.fillStyle = 'tomato'

      ctx.beginPath()

      ctx.arc(x, y, 50, 0, Math.PI * 2, true)

      ctx.fill()

    },

    [x, y]

  )

  useDraw(drawCircle) // draws the circle

  return null // you can return dom element here too.

}

```

### Composing all together

Then add the components with the draw hook into the canvas.

```javascript

const MyCoolAppComponent = () => {

  return (

    

      

      

    

  )

}

```

This should two circles to the canvas.

### Reseting the DOM view.

The view currently is not setup to handle viewing dom nodes above the canvas. That can easily be change by using the stage component.

```javascript

import { Canvas, Stage } from 'react-scribble'

const MyCoolAppComponent = () => {

  return (

    

      

        
 Now i am on the dom in front of the canvas 

      

    

  )

}

```


## More examples

View the [examples](./examples) directory for more examples of how to use this component.