react-push-dot-grid

react-push-dot-grid

An interactive React canvas component that creates a dot grid with push/pull mouse effects.

Installation

npm install react-push-dot-grid

Usage

import { PushDotGrid } from "react-push-dot-grid";

function App() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <PushDotGrid type="push" dotSpace={28} dotRadius={1} strength={0.35} />
    </div>
  );
}

Props

Prop	Type	Default	Description
type	"push" | "pull"	"push"	Direction of the mouse effect
dotSpace	number	28	Spacing between dots in pixels
dotRadius	number	1	Base radius of each dot
strength	number	0.35	Force strength of the effect
maxDist	number	120	Mouse influence radius in pixels
className	string	—	CSS class for the wrapper div
style	object	—	Inline styles for the wrapper div

Imperative API

Use a ref to access imperative methods:

import { useRef } from "react";
import { PushDotGrid } from "react-push-dot-grid";

function App() {
  const gridRef = useRef(null);

  return (
    <>
      <PushDotGrid ref={gridRef} type="push" />
      <button onClick={() => gridRef.current.reset()}>Reset</button>
    </>
  );
}

Methods

Method	Description
reset()	Reinitializes the dot grid

Notes

• The component fills its parent container — make sure the parent has a defined width and height.
• Works with both push and pull modes.

License

MIT