react-tsparticles

Official tsParticles ReactJS component

Installation

1npm install react-tsparticles

or

1yarn 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:

1$ create-react-app your_app --template particles

or

1$ create-react-app your_app --template particles-typescript

How to use

Code

Examples:

Remote url

JavaScript support - url

1import { useCallback } from "react";
2import Particles from "react-tsparticles";
3//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
4import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
5
6const App = () => {
7    const particlesInit = useCallback(async engine => {
8        console.log(engine);
9        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
10        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
11        // starting from v2 you can add only the features you need reducing the bundle size
12        //await loadFull(engine);
13        await loadSlim(engine);
14    }, []);
15
16    const particlesLoaded = useCallback(async container => {
17        await console.log(container);
18    }, []);
19
20    return (
21        <Particles id="tsparticles" url="http://foo.bar/particles.json" init={particlesInit} loaded={particlesLoaded} />
22    );
23};

TypeScript support - url

1import { useCallback } from "react";
2import Particles from "react-tsparticles";
3import type { Container, Engine } from "tsparticles-engine";
4//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
5import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
6
7const App = () => {
8    const particlesInit = useCallback(async (engine: Engine) => {
9        console.log(engine);
10
11        // you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
12        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
13        // starting from v2 you can add only the features you need reducing the bundle size
14        //await loadFull(engine);
15        await loadSlim(engine);
16    }, []);
17
18    const particlesLoaded = useCallback(async (container: Container | undefined) => {
19        await console.log(container);
20    }, []);
21
22    return (
23        <Particles id="tsparticles" url="http://foo.bar/particles.json" init={particlesInit} loaded={particlesLoaded} />
24    );
25};

Options object

JavaScript support - object

1import { useCallback } from "react";
2import Particles from "react-tsparticles";
3//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
4import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
5
6const App = () => {
7    const particlesInit = useCallback(async engine => {
8        console.log(engine);
9        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
10        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
11        // starting from v2 you can add only the features you need reducing the bundle size
12        //await loadFull(engine);
13        await loadSlim(engine);
14    }, []);
15
16    const particlesLoaded = useCallback(async container => {
17        await console.log(container);
18    }, []);
19
20    return (
21        <Particles
22            id="tsparticles"
23            init={particlesInit}
24            loaded={particlesLoaded}
25            options={{
26                background: {
27                    color: {
28                        value: "#0d47a1",
29                    },
30                },
31                fpsLimit: 120,
32                interactivity: {
33                    events: {
34                        onClick: {
35                            enable: true,
36                            mode: "push",
37                        },
38                        onHover: {
39                            enable: true,
40                            mode: "repulse",
41                        },
42                        resize: true,
43                    },
44                    modes: {
45                        push: {
46                            quantity: 4,
47                        },
48                        repulse: {
49                            distance: 200,
50                            duration: 0.4,
51                        },
52                    },
53                },
54                particles: {
55                    color: {
56                        value: "#ffffff",
57                    },
58                    links: {
59                        color: "#ffffff",
60                        distance: 150,
61                        enable: true,
62                        opacity: 0.5,
63                        width: 1,
64                    },
65                    move: {
66                        direction: "none",
67                        enable: true,
68                        outModes: {
69                            default: "bounce",
70                        },
71                        random: false,
72                        speed: 6,
73                        straight: false,
74                    },
75                    number: {
76                        density: {
77                            enable: true,
78                            area: 800,
79                        },
80                        value: 80,
81                    },
82                    opacity: {
83                        value: 0.5,
84                    },
85                    shape: {
86                        type: "circle",
87                    },
88                    size: {
89                        value: { min: 1, max: 5 },
90                    },
91                },
92                detectRetina: true,
93            }}
94        />
95    );
96};

TypeScript support - object

1import { useCallback } from "react";
2import type { Container, Engine } from "tsparticles-engine";
3import Particles from "react-tsparticles";
4//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
5import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
6
7const App = () => {
8    const particlesInit = useCallback(async (engine: Engine) => {
9        console.log(engine);
10
11        // you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
12        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
13        // starting from v2 you can add only the features you need reducing the bundle size
14        //await loadFull(engine);
15        await loadSlim(engine);
16    }, []);
17
18    const particlesLoaded = useCallback(async (container: Container | undefined) => {
19        await console.log(container);
20    }, []);
21    return (
22        <Particles
23            id="tsparticles"
24            init={particlesInit}
25            loaded={particlesLoaded}
26            options={{
27                background: {
28                    color: {
29                        value: "#0d47a1",
30                    },
31                },
32                fpsLimit: 120,
33                interactivity: {
34                    events: {
35                        onClick: {
36                            enable: true,
37                            mode: "push",
38                        },
39                        onHover: {
40                            enable: true,
41                            mode: "repulse",
42                        },
43                        resize: true,
44                    },
45                    modes: {
46                        push: {
47                            quantity: 4,
48                        },
49                        repulse: {
50                            distance: 200,
51                            duration: 0.4,
52                        },
53                    },
54                },
55                particles: {
56                    color: {
57                        value: "#ffffff",
58                    },
59                    links: {
60                        color: "#ffffff",
61                        distance: 150,
62                        enable: true,
63                        opacity: 0.5,
64                        width: 1,
65                    },
66                    move: {
67                        direction: "none",
68                        enable: true,
69                        outModes: {
70                            default: "bounce",
71                        },
72                        random: false,
73                        speed: 6,
74                        straight: false,
75                    },
76                    number: {
77                        density: {
78                            enable: true,
79                            area: 800,
80                        },
81                        value: 80,
82                    },
83                    opacity: {
84                        value: 0.5,
85                    },
86                    shape: {
87                        type: "circle",
88                    },
89                    size: {
90                        value: { min: 1, max: 5 },
91                    },
92                },
93                detectRetina: true,
94            }}
95        />
96    );
97};

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
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.

You can find sample configurations here 📖

Demos

Preset demos can be found here

There's also a CodePen collection actively maintained and updated here

Report bugs and issues here

tsParticle Website