useBrush

The useBrush hook makes the given element brushable. The passed ref is the element that listens for the mousedown event. The provided options can be used to configure the brush like its direction, extent and so on.

Demo

xy

x

y

Usage

import { useBrush, BrushRect } from 'hyprvis';

function BrushDemo() {
    const ref = useRef();
    const { brush, setBrush } = useBrush(ref);

    return <svg ref={ref}>
        {
            brush ? <BrushRect parent={ref} direction="both" onChange={setBrush} brush={brush} /> : null }
    </svg>
}

API

interface UseBrushProps {
  value?: Brush;
  onChange?: (brush: Brush) => void;
  onChangeEnd?: (brush: Brush) => void;
  onClick?: () => void;
  defaultValue?: Brush;
  direction?: Direction;
  extent?: Extent;
  persistMode?: PersistMode;
}