usePaint

Hook that allows you to draw in a specific area

browser

test coverage

Last changed: last month

Installation

Library

CLI

Manual

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

Usage

const drawing = usePaint(canvasRef);
// or
const { ref, drawing } = usePaint();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to be painted
options?	UsePaintOptions	-	The options to be used

Returns

UsePaintReturn

Parameters

Name	Type	Default	Note
options?	UsePaintOptions	-	The options to be used

Returns

UsePaintReturn & { ref: StateRef<HTMLCanvasElement> }

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface Point {
  x: number;
  y: number;
}

export interface UsePaintOptions {
  /** Brush color */
  color?: string;
  /** Initial lines */
  initialLines?: Paint['lines'];
  /** Brush opacity */
  opacity?: number;
  /** Brush radius */
  radius?: number;
  /** Smooth brush movement */
  smooth?: boolean;
  /** Callback when the mouse is down */
  onMouseDown?: (event: MouseEvent, paint: Paint) => void;
  /** Callback when the mouse is moved */
  onMouseMove?: (event: MouseEvent, paint: Paint) => void;
  /** Callback when the mouse is up */
  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> };
}

Source

Source • Demo

Contributors

D

debabin

H

hywax

V

VladPorvin