@tsparticles/preact

Official tsParticles Preact component

Installation

npm install @tsparticles/preact

or

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