/react-realtime-drawing

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

Primary LanguageTypeScriptMIT LicenseMIT

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