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

    2.1.2 • Public • Published

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

    Install

    npm i @visx/event

    DownloadsWeekly Downloads

    83,817

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    16 kB

    Total Files

    31

    Last publish

    Collaborators

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