/reactuse

usePaint

Draws on a canvas and exposes drawing controls.

Usage

import { usePaint } from "@siberiacancode/reactuse";

const paint = usePaint<HTMLCanvasElement>();
// or
const paint = usePaint(ref, { color: "red" });

Example

import { usePaint } from "@siberiacancode/reactuse";

export const Sketch = () => {
  const paint = usePaint<HTMLCanvasElement>({ color: "red", radius: 4 });
  const ref = paint.ref;

  return (
    <div>
      <canvas ref={ref} width={300} height={200} />
      <button onClick={() => paint.clear()}>Clear</button>
    </div>
  );
};

color:

Brush color.

const paint = usePaint<HTMLCanvasElement>({ color: "red" });

opacity:

Brush opacity.

const paint = usePaint<HTMLCanvasElement>({ opacity: 0.5 });

radius:

Brush size.

const paint = usePaint<HTMLCanvasElement>({ radius: 6 });

smooth:

Smoothing toggle.

const paint = usePaint<HTMLCanvasElement>({ smooth: true });

initialLines:

Restore drawings.

const paint = usePaint<HTMLCanvasElement>({ initialLines: [] });

onMouseDown:

Start drawing.

const paint = usePaint<HTMLCanvasElement>({
  onMouseDown: () => console.log("down"),
});

onMouseMove:

During drawing.

const paint = usePaint<HTMLCanvasElement>({
  onMouseMove: () => console.log("move"),
});

onMouseUp:

Stop drawing.

const paint = usePaint<HTMLCanvasElement>({
  onMouseUp: () => console.log("up"),
});

Type Declarations

import type { HookTarget } from "@siberiacancode/reactuse";
import type { StateRef } from "@siberiacancode/reactuse";

export interface Point {
  x: number;
  y: number;
}
export interface UsePaintOptions {
  color?: string;
  initialLines?: Array<{
    points: Point[];
    color: string;
    radius: number;
    opacity: number;
  }>;
  opacity?: number;
  radius?: number;
  smooth?: boolean;
  onMouseDown?: (event: MouseEvent, paint: Paint) => void;
  onMouseMove?: (event: MouseEvent, paint: Paint) => void;
  onMouseUp?: (event: MouseEvent, paint: Paint) => void;
}
export interface UsePaintReturn {
  drawing: boolean;
  lines: Paint["lines"];
  clear: () => void;
  draw: (
    points: Point[],
    color: string,
    opacity: number,
    radius: number
  ) => void;
  undo: () => void;
}
export interface UsePaint {
  (target: HookTarget, options?: UsePaintOptions): UsePaintReturn;
  <Target extends HTMLCanvasElement>(
    options?: UsePaintOptions,
    target?: never
  ): UsePaintReturn & { ref: StateRef<Target> };
}
export declare const usePaint: UsePaint;