React-interactive-grid NPM

react-interactive-grid

A highly customizable React component that renders an interactive grid of dots. The dots change in opacity based on mouse (or touch) proximity, creating a dynamic, engaging visual effect.

Features

Interactive Grid: Dots respond to mouse/touch movement.
Customizable Appearance: Control dot color, number of dots, square size, dot size, activation radius, and grid background.
Optimized Performance: Uses throttled event handlers, precomputed grid layout, and combines dots into a single SVG path per grid square.
Easy Integration: Works seamlessly in any React application.

Installation

Install the package via npm:

npm install react-interactive-grid

Or via yarn:

yarn add react-interactive-grid

Usage

Below is an example of how to integrate the component into your React application:

import React from "react";
import { InteractiveGrid } from "react-interactive-grid";

const App: React.FC = () => (
  <div>
    <InteractiveGrid
      color="#00ff00"
      dotsPerRow={8}
      squareSize={80}
      dotSize={3}
      activationRadius={250}
      background="#f0f0f0"
    />
    <h1>Your Application Content</h1>
  </div>
);

export default App;

Props

Prop	Type	Default	Description
`color`	string	`#ff0000`	The color of the dots.
`dotsPerRow`	number	`6`	The number of dots per row (and column) in each square.
`squareSize`	number	`60`	The size (in pixels) of each square container.
`dotSize`	number	`2`	The size (in pixels) of each dot.
`activationRadius`	number	`200`	The radius (in pixels) around the mouse where the dots become visible.
`background`	string	`transparent`	The background color behind the grid.

How It Works

The component creates an SVG grid of dots where:

Grid Layout: The grid is divided into squares, with dots rendered inside each square.
Combined SVG Paths: All dots within a square are combined into a single SVG <path> to reduce the number of rendered DOM nodes.
Dynamic Opacity: The opacity of each square's dots is dynamically adjusted based on the distance from the current mouse (or touch) position.
Performance Optimizations: Throttled event listeners and precomputed grid paths ensure smooth performance even in dense grids.