react-realtime-drawing
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

React Realtime Drawing

React hooks for HTML canvas drawing and spectation in real time.

Features

  • React hooks support
  • Mouse and touch support 🖱️👆
  • Brush color and size support 🖌️
  • Automatic canvas scaling ↕️
  • Lightweight, under 2kB gzipped 🚀
  • Dependency-free! 📦
  • Built with TypeScript, typings included 💻

Usage

import React from 'react';
import { useRealtimeDrawer, useRealtimeViewer } from 'react-realtime-drawing';

export default () => {
  const [viewerRef, { onChange }] = useRealtimeViewer();

  const [drawerRef] = useRealtimeDrawer({
    color: '#00ffaa',
    onChange
  });

  return (
    <div>
      <div style={{ width: 512, height: 512 }}>
        <canvas ref={drawerRef} />
      </div>
      <div style={{ width: 512, height: 512 }}>
        <canvas ref={viewerRef} />
      </div>
    </div>
  );
}

Installation

$ npm install react-realtime-drawing

# or using Yarn

$ yarn add react-realtime-drawing

License

MIT © Jim Saari

Package Sidebar

Install

npm i react-realtime-drawing

Weekly Downloads

17

Version

0.1.4

License

MIT

Unpacked Size

70.7 kB

Total Files

16

Last publish

Collaborators

  • jsaari