@visx/event

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

Changelog

v1.0.0

:house: Internal

• project renamed from vx => visx, migrated from hshoff/vx => airbnb/visx #802, #803

:memo: Documentation

• Demo site migrated from https://vx-demo.now.sh/ => https://airbnb.io/visx #804
• Demo site re-brand

:boom: Breaking Changes

• [all packages] vx-... classNames are renamed to visx-... #803
• [demo] existing codesandbox links which reference vx-demo directory structure will break #803
• [tooltip] className="vx-tooltip-portal" => visx-tooltip (so as not to be confused with the new TooltipInPortal) #803

:bug: Bug Fix

• [demo] fix /axis codesandbox dependency #799

:trophy: Contributors

• hshoff
• williaster

@vx/*@0.0.199 => @visx/*@1.0.0