React Particles Lite

A high-performance, lightweight particle engine for React. Built with TypeScript and optimized with QuadTree spatial partitioning, image caching and physics for smooth 60FPS interactions even with hundreds of particles.

Features

- 🚀 Performant: Uses QuadTree for O(n log n) interaction calculations.
- 🛠 Customizable: Control shapes, movement, sway, depth blur, and interactivity.
- 📱 Responsive: Automatically handles canvas resizing.
- 📦 Zero Dependencies: Only depends on React as a peer dependency.
- 🎨 Presets: Built-in default preset to get started in seconds.

Installation

``bash
npm install react-particles-lite


or


yarn add react-particles-lite
`

Quick Start

`tsx
import { Particles } from "react-particles-lite";

function App() {
return (



);
}
`

Props

| Prop | Type | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
| params | IParticleParams | {} | Advanced configuration object. |
| preset | TPresets | "default" | Base configuration template. |
| className | string | undefined | CSS class for the canvas element. |
| onLoaded | () => void | undefined | Callback fired when all assets (images) are loaded. |




Configuration Options (IParticleParams)


| Option | Description |
| --- | --- |
| number | Control the quantity and the density of the particles. |
| shape | Supports circle, edge, triangle, polygon, star and image. |
| opacity | Static or animated opacity settings. |
| size | Static or pulsating size settings. |
| move | Speed, direction and out-of-bounds behavior. |
| interactivity | Mouse hover (grab, bubble, repulse) and click (push, remove) events. |
| depthBlur | Simulates depth of field based on particle size. |
| sway` | Adds organic, oscillating movement |

License

ISC © Nikoloz Topuridze