Package Exports

@vx/event

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vx/event) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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>