@tsparticles/solid

Official tsParticles solid component

Installation

npm install @tsparticles/solid

or

yarn add @tsparticles/solid

How to use

Code

Examples:

Remote url

import Particles from "@tsparticles/solid";

function App() {
    const [init, setInit] = createSignal(false);

    createEffect(() => {
        if (init()) {
            return;
        }

        initParticlesEngine(async engine => {
            // 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(() => {
            setInit(true);
        });
    });

    return (
        <div class="App">
            {init() && <Particles id="tsparticles" init={particlesInit} url="https://foo.bar/particles.json" />}
        </div>
    );
}

Options object

import Particles from "@tsparticles/solid";

function App() {
    const [init, setInit] = createSignal(false);

    createEffect(() => {
        if (init()) {
            return;
        }

        initParticlesEngine(async engine => {
            // 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(() => {
            setInit(true);
        });
    });

    return (
        <div class="App">
            {init() && (
                <Particles
                    id="tsparticles"
                    init={particlesInit}
                    options={{
                        background: {
                            color: "#000",
                        },
                        fullScreen: {
                            enable: true,
                        },
                    }}
                />
            )}
        </div>
    );
}

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

You can see the official sample created using CodeSandbox here

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