react-pointer-observer
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

react-pointer-observer

React UI hook that make pointer-events easier to use.

Usage

import { usePointerObserver } from "react-pointer-observer";

const Demo = () => {
  const ref = useRef(null);
  const pointer = usePointerObserver(ref);

  return (
    <div
      ref={ref}
      style={{
        border: "1px solid #ccc",
        display: "inline-flex",
        placeContent: "center",
        placeItems: "center",
        width: "100px",
        height: "100px",
        position: "absolute",
        boxSizing: "border-box",
        fontSize: "8px",
        top: pointer ? round(pointer.pageY - pointer.localY, 20) : 0,
        left: pointer ? round(pointer.pageX - pointer.localX, 20) : 0,
      }}
    />
  );
};

import { observePointer } from "react-pointer-observer";

const Demo2 = () => {
  const ref = useRef(null);
  observePointer(ref, (pointer) => {
    console.log(pointer); // { startX: number, startY:number ... }
  });
  return <div ref={ref} />;
};

Package Sidebar

Install

npm i react-pointer-observer

Weekly Downloads

2

Version

1.0.3

License

Unlicense

Unpacked Size

12.8 kB

Total Files

6

Last publish

Collaborators

  • trkbt10