@vx/event
TypeScript icon, indicating that this package has built-in type declarations

0.0.199 • Public • Published

@vx/event

Installation

npm install --save @vx/event

Usage

@vx/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 '@vx/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 '@vx/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>

Package Sidebar

Install

npm i @vx/event

Weekly Downloads

57,215

Version

0.0.199

License

MIT

Unpacked Size

14.4 kB

Total Files

31

Last publish

Collaborators

  • hshoff
  • christopher.card.williams
  • vx-hshoff