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