useDrauu

Category

@Integrations

Export Size

867 B

Package

@reause/integrations

Last Changed

5 days ago

Reactive instance for drauu.

Demo

Install

npm i drauu@^1

Usage

import { useDrauu } from '@reause/integrations'
import { useRef } from 'react'

const target = useRef<SVGSVGElement>(null)
const { undo, redo, canUndo, canRedo, clear, brush, setBrush } = useDrauu(target, {
  brush: { color: 'black', size: 3 },
})

// `brush` is the current brush value; `setBrush` is its paired setter and
// updates both the returned value and the mounted instance
setBrush(prev => ({ ...prev, color: '#ef4444' }))

return <svg ref={target} />

Type Declarations

export type UseDrauuOptions = Omit<Options, 'el'>

export interface UseDrauuReturn {
    drauuInstance: Drauu | undefined;
    load: (svg: string) => void;
    dump: () => string | undefined;
    clear: () => void;
    cancel: () => void;
    undo: () => boolean | undefined;
    redo: () => boolean | undefined;
    canUndo: boolean;
    canRedo: boolean;
    brush: Brush;
    setBrush: Dispatch<SetStateAction<Brush>>;
    onChanged: ListenerOn<() => void>;
    onCommitted: ListenerOn<(node: SVGElement | undefined) => void>;
    onStart: ListenerOn<() => void>;
    onEnd: ListenerOn<() => void>;
    onCanceled: ListenerOn<() => void>;
}

type DrauuTarget = RefObject<MaybeElement>

export function useDrauu(target: DrauuTarget, options?: UseDrauuOptions): UseDrauuReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.7 on

534c2 - refactor(shared)!: return the off function from listener registrars

v0.1.0 on

e4421 - fix(integrations): resolve useDrauu audit findings (#800)

ddc7c - feat(integrations): add useDrauu (#114)