react-realtime-drawing

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

License

MIT Jim Saari