344 lines
13 KiB
Markdown
344 lines
13 KiB
Markdown
[](https://particles.js.org)
|
|
|
|
# react-tsparticles
|
|
|
|
[](https://www.npmjs.com/package/react-tsparticles) [](https://www.npmjs.com/package/react-tsparticles) [](https://github.com/sponsors/matteobruni)
|
|
|
|
Official [tsParticles](https://github.com/matteobruni/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") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
|
|
|
|
## Installation
|
|
|
|
```shell
|
|
npm install react-tsparticles
|
|
```
|
|
|
|
or
|
|
|
|
```shell
|
|
yarn add react-tsparticles
|
|
```
|
|
|
|
### 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:
|
|
|
|
#### Remote url
|
|
|
|
##### JavaScript support - url
|
|
|
|
```jsx
|
|
import { useCallback } from "react";
|
|
import Particles from "react-tsparticles";
|
|
import { loadFull } from "tsparticles";
|
|
|
|
const App = () => {
|
|
const particlesInit = useCallback(async engine => {
|
|
console.log(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 loadFull(engine);
|
|
}, []);
|
|
|
|
const particlesLoaded = useCallback(async container => {
|
|
await console.log(container);
|
|
}, []);
|
|
|
|
return (
|
|
<Particles id="tsparticles" url="http://foo.bar/particles.json" init={particlesInit} loaded={particlesLoaded} />
|
|
);
|
|
};
|
|
```
|
|
|
|
##### TypeScript support - url
|
|
|
|
```typescript jsx
|
|
import { useCallback } from "react";
|
|
import Particles from "react-tsparticles";
|
|
import type { Container, Engine } from "tsparticles-engine";
|
|
import { loadFull } from "tsparticles";
|
|
|
|
const App = () => {
|
|
const particlesInit = useCallback(async (engine: Engine) => {
|
|
console.log(engine);
|
|
|
|
// you can initialize 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 loadFull(engine);
|
|
}, []);
|
|
|
|
const particlesLoaded = useCallback(async (container: Container | undefined) => {
|
|
await console.log(container);
|
|
}, []);
|
|
|
|
return (
|
|
<Particles id="tsparticles" url="http://foo.bar/particles.json" init={particlesInit} loaded={particlesLoaded} />
|
|
);
|
|
};
|
|
```
|
|
|
|
#### Options object
|
|
|
|
##### JavaScript support - object
|
|
|
|
```jsx
|
|
import { useCallback } from "react";
|
|
import Particles from "react-tsparticles";
|
|
import { loadFull } from "tsparticles";
|
|
|
|
const App = () => {
|
|
const particlesInit = useCallback(async engine => {
|
|
console.log(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 loadFull(engine);
|
|
}, []);
|
|
|
|
const particlesLoaded = useCallback(async container => {
|
|
await console.log(container);
|
|
}, []);
|
|
|
|
return (
|
|
<Particles
|
|
id="tsparticles"
|
|
init={particlesInit}
|
|
loaded={particlesLoaded}
|
|
options={{
|
|
background: {
|
|
color: {
|
|
value: "#0d47a1",
|
|
},
|
|
},
|
|
fpsLimit: 120,
|
|
interactivity: {
|
|
events: {
|
|
onClick: {
|
|
enable: true,
|
|
mode: "push",
|
|
},
|
|
onHover: {
|
|
enable: true,
|
|
mode: "repulse",
|
|
},
|
|
resize: true,
|
|
},
|
|
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,
|
|
},
|
|
collisions: {
|
|
enable: true,
|
|
},
|
|
move: {
|
|
directions: "none",
|
|
enable: true,
|
|
outModes: {
|
|
default: "bounce",
|
|
},
|
|
random: false,
|
|
speed: 6,
|
|
straight: false,
|
|
},
|
|
number: {
|
|
density: {
|
|
enable: true,
|
|
area: 800,
|
|
},
|
|
value: 80,
|
|
},
|
|
opacity: {
|
|
value: 0.5,
|
|
},
|
|
shape: {
|
|
type: "circle",
|
|
},
|
|
size: {
|
|
value: { min: 1, max: 5 },
|
|
},
|
|
},
|
|
detectRetina: true,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
##### TypeScript support - object
|
|
|
|
```typescript jsx
|
|
import { useCallback } from "react";
|
|
import type { Container, Engine } from "tsparticles-engine";
|
|
import Particles from "react-tsparticles";
|
|
import { loadFull } from "tsparticles";
|
|
|
|
const App = () => {
|
|
const particlesInit = useCallback(async (engine: Engine) => {
|
|
console.log(engine);
|
|
|
|
// you can initialize 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 loadFull(engine);
|
|
}, []);
|
|
|
|
const particlesLoaded = useCallback(async (container: Container | undefined) => {
|
|
await console.log(container);
|
|
}, []);
|
|
return (
|
|
<Particles
|
|
id="tsparticles"
|
|
init={particlesInit}
|
|
loaded={particlesLoaded}
|
|
options={{
|
|
background: {
|
|
color: {
|
|
value: "#0d47a1",
|
|
},
|
|
},
|
|
fpsLimit: 120,
|
|
interactivity: {
|
|
events: {
|
|
onClick: {
|
|
enable: true,
|
|
mode: "push",
|
|
},
|
|
onHover: {
|
|
enable: true,
|
|
mode: "repulse",
|
|
},
|
|
resize: true,
|
|
},
|
|
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,
|
|
},
|
|
collisions: {
|
|
enable: true,
|
|
},
|
|
move: {
|
|
direction: "none",
|
|
enable: true,
|
|
outModes: {
|
|
default: "bounce",
|
|
},
|
|
random: false,
|
|
speed: 6,
|
|
straight: false,
|
|
},
|
|
number: {
|
|
density: {
|
|
enable: true,
|
|
area: 800,
|
|
},
|
|
value: 80,
|
|
},
|
|
opacity: {
|
|
value: 0.5,
|
|
},
|
|
shape: {
|
|
type: "circle",
|
|
},
|
|
size: {
|
|
value: { min: 1, max: 5 },
|
|
},
|
|
},
|
|
detectRetina: true,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
### 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. |
|
|
| canvasClassName | string | the class name of the canvas. |
|
|
| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) |
|
|
| init | function | This function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here |
|
|
| loaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here |
|
|
|
|
#### particles.json
|
|
|
|
Find all configuration options [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html).
|
|
|
|
You can find sample json configurations [here](https://github.com/matteobruni/tsparticles/tree/main/websites/particles.js.org/presets) 📖
|
|
|
|
## 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/matteobruni/tsparticles/issues)
|
|
|
|
[tsParticle Website](https://particles.js.org)
|