Awesome

@tsparticles/preact

Official tsParticles Preact component

Installation

npm install @tsparticles/preact

yarn add @tsparticles/preact

How to use

Code

Examples:

Remote url

import Particles, { initParticlesEngine } from "@tsparticles/preact";
import { loadFull } from "tsparticles";

class App extends Component {
    state = {
        particlesInitialized: false,
    };

    constructor(props) {
        super(props);

        this.particlesLoaded = this.particlesLoaded.bind(this);

        initParticlesEngine(async engine => {
            // you can initialize the tsParticles instance (main) 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);
        }).then(() => {
            this.setState({
                particlesInitialized: true,
            });
        });
    }

    particlesLoaded(container) {
        console.log(container);
    }

    render() {
        if (!this.state.particlesInitialized) {
            return null;
        }

        return (
            <Particles id="tsparticles" url="http://foo.bar/particles.json" particlesLoaded={this.particlesLoaded} />
        );
    }
}

Options object

import Particles from "@tsparticles/preact";
import { loadFull } from "tsparticles";

class App extends Component {
    state = {
        particlesInitialized: false,
    };

    constructor(props) {
        super(props);

        this.particlesLoaded = this.particlesLoaded.bind(this);

        initParticlesEngine(async engine => {
            // you can initialize the tsParticles instance (main) 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);
        }).then(() => {
            this.setState({
                particlesInitialized: true,
            });
        });
    }

    particlesLoaded(container) {
        console.log(container);
    }

    render() {
        if (!this.state.particlesInitialized) {
            return null;
        }

        return (
            <Particles
                id="tsparticles"
                particlesLoaded={this.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,
                        },
                        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
particlesLoaded	function	This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here

Find your parameters configuration here.

Demos

The demo website is here

https://particles.js.org

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

https://codepen.io/collection/DPOage