Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tsparticles/react
React tsParticles official component
https://github.com/tsparticles/react
2d animations canvas confetti fireworks hacktoberfest javascript js npm particles particles-js react reactjs ts tsparticles typescript web
Last synced: 3 days ago
JSON representation
React tsParticles official component
- Host: GitHub
- URL: https://github.com/tsparticles/react
- Owner: tsparticles
- License: mit
- Created: 2022-11-11T00:27:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-10T14:20:23.000Z (4 months ago)
- Last Synced: 2024-10-29T17:32:28.569Z (2 months ago)
- Topics: 2d, animations, canvas, confetti, fireworks, hacktoberfest, javascript, js, npm, particles, particles-js, react, reactjs, ts, tsparticles, typescript, web
- Language: JavaScript
- Homepage: https://particles.js.org
- Size: 1.37 MB
- Stars: 420
- Watchers: 4
- Forks: 29
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - tsparticles/react - React tsParticles official component (JavaScript)
README
[](https://particles.js.org)
# @tsparticles/react
[](https://www.npmjs.com/package/@tsparticles/react) [](https://www.npmjs.com/package/@tsparticles/react) [](https://github.com/sponsors/matteobruni)
Official [tsParticles](https://github.com/tsparticles/tsparticles) ReactJS component
[](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 
## Installation
```shell
npm install @tsparticles/react
```
or
```shell
yarn add @tsparticles/react
```
### TypeScript Installation
```shell
npm install @tsparticles/react @tsparticles/engine
```
or
```shell
yarn add @tsparticles/react @tsparticles/engine
```
[@tsparticles/engine](https://npmjs.com/package/@tsparticles/engine) is the core package for [tsParticles](https://particles.js.org), it contains useful types like `ISourceOptions`, `Engine` or `Container`.
### create-react-app
Starting from version 1.17.0 there are two official `create-react-app` templates:
- `cra-template-particles`: Simple ReactJS template with full screen particles, using JavaScript
- `cra-template-particles-typescript`: Simple ReactJS template with full screen particles, using TypeScript
You can simply install them using the `create-react-app` command like this:
```shell
$ create-react-app your_app --template particles
```
or
```shell
$ create-react-app your_app --template particles-typescript
```
## How to use
### Code
Examples:
#### Options object
##### JavaScript support - object
```jsx
import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
const [init, setInit] = useState(false);
// this should be run only once per application lifetime
useEffect(() => {
initParticlesEngine(async (engine) => {
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
//await loadAll(engine);
//await loadFull(engine);
await loadSlim(engine);
//await loadBasic(engine);
}).then(() => {
setInit(true);
});
}, []);
const particlesLoaded = (container) => {
console.log(container);
};
const options = useMemo(
() => ({
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
}),
[],
);
if (init) {
return (
);
}
return <>>;
};
```
##### TypeScript support - object
```tsx
import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import {
type Container,
type ISourceOptions,
MoveDirection,
OutMode,
} from "@tsparticles/engine";
// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
const [init, setInit] = useState(false);
// this should be run only once per application lifetime
useEffect(() => {
initParticlesEngine(async (engine) => {
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
//await loadAll(engine);
//await loadFull(engine);
await loadSlim(engine);
//await loadBasic(engine);
}).then(() => {
setInit(true);
});
}, []);
const particlesLoaded = async (container?: Container): Promise => {
console.log(container);
};
const options: ISourceOptions = useMemo(
() => ({
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: MoveDirection.none,
enable: true,
outModes: {
default: OutMode.out,
},
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
}),
[],
);
if (init) {
return (
);
}
return <>>;
};
```
#### Remote url
##### JavaScript support - url
```jsx
import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
const [init, setInit] = useState(false);
// this should be run only once per application lifetime
useEffect(() => {
initParticlesEngine(async (engine) => {
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
//await loadAll(engine);
//await loadFull(engine);
await loadSlim(engine);
//await loadBasic(engine);
}).then(() => {
setInit(true);
});
}, []);
const particlesLoaded = (container) => {
console.log(container);
};
if (init) {
return (
);
}
return <>>;
};
```
##### TypeScript support - url
```tsx
import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import type { Container } from "@tsparticles/engine";
// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
const [init, setInit] = useState(false);
// this should be run only once per application lifetime
useEffect(() => {
initParticlesEngine(async (engine) => {
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
//await loadAll(engine);
//await loadFull(engine);
await loadSlim(engine);
//await loadBasic(engine);
}).then(() => {
setInit(true);
});
}, []);
const particlesLoaded = (container?: Container) => {
console.log(container);
};
if (init) {
return (
);
}
return <>>;
};
```
### Props
| Prop | Type | Definition |
| --------- | ------ | ---------------------------------------------------- |
| id | string | The id of the element. |
| width | string | The width of the canvas. |
| height | string | The height of the canvas. |
| options | object | The options of the particles instance. |
| url | string | The remote options url, called using an AJAX request |
| style | object | The style of the canvas element. |
| className | string | The class name of the canvas wrapper. |
#### particles.json
Find all configuration
options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
You can find sample configurations [here](https://github.com/tsparticles/tsparticles/tree/main/utils/configs/src) 📖
## Demos
Preset demos can be found [here](https://particles.js.org/samples/presets/index.html)
There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)
Report bugs and issues [here](https://github.com/tsparticles/tsparticles/issues)
[tsParticle Website](https://particles.js.org)