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