README
@visx/event
Installation
npm install --save @visx/event
Usage
@visx/event
exports a utility localPoint
that takes an SVG
MouseEvent
or TouchEvent
as
input and returns a { x: number; y: number; }
point coordinate (or null
in the case the event
has no ownerSVGElement
) within the coordinate system of the SVG
. This makes placement of
tooltips, finding nearby datum, etc. easier.
Example:
import { localPoint } from '@visx/event';
<svg>
<SomeElement
{...}
onMouseMove={(event: MouseEvent) => {
const point = localPoint(event) || { x: 0, y: 0 };
// use coordinates ...
}}
/>
{...}
</svg>
You may optionally pass a reference to the SVG node
import { useRef } from 'react';
import { localPoint } from '@visx/event';
const svgRef = useRef<SVGSVGElement>(null);
<svg ref={svgRef}>
<SomeElement
{...}
onMouseMove={(event: MouseEvent) => {
const point = localPoint(svgRef.current, event) || { x: 0, y: 0 };
// use coordinates ...
}}
/>
{...}
</svg>