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

    0.1.3 • 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

    Install

    npm i react-realtime-drawing

    DownloadsWeekly Downloads

    4

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    70.6 kB

    Total Files

    21

    Last publish

    Collaborators

    • jsaari