This package has been deprecated

Author message:

@tsparticles/solid is the new package compatible with v3, please use that

solid-particles

2.9.3 • Public • Published

banner

solid-particles

npm npm GitHub Sponsors

Official tsParticles solid component

Slack Discord Telegram

tsParticles Product Hunt

Installation

npm install solid-particles

or

yarn add solid-particles

How to use

Code

Examples:

Remote url

import Particles from "solid-particles";

function App() {
    const particlesInit = async main => {
        // 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(main);
    };

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

Options object

import Particles from "solid-particles";
import { loadFull } from "tsparticles";

class App extends Component {
    constructor(props) {
        super(props);

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

    async particlesInit(main) {
        console.log(main);

        // 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(main);
    }

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

    render() {
        return (
            <Particles
                id="tsparticles"
                init={this.particlesInit}
                loaded={this.particlesLoaded}
                options={{
                    background: {
                        color: {
                            value: "#0d47a1",
                        },
                    },
                    fpsLimit: 120,
                    interactivity: {
                        events: {
                            onClick: {
                                enable: true,
                                mode: "push",
                            },
                            onHover: {
                                enable: true,
                                mode: "repulse",
                            },
                            resize: true,
                        },
                        modes: {
                            bubble: {
                                distance: 400,
                                duration: 2,
                                opacity: 0.8,
                                size: 40,
                            },
                            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
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

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

Package Sidebar

Install

npm i solid-particles

Weekly Downloads

28

Version

2.9.3

License

MIT

Unpacked Size

52.7 kB

Total Files

17

Last publish

Collaborators

  • ar3s
  • matteobruni