Neolithic Psychedelic Mushrooms

    solid-particles

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

    Install

    npm i solid-particles

    DownloadsWeekly Downloads

    56

    Version

    2.5.3

    License

    MIT

    Unpacked Size

    68.5 kB

    Total Files

    21

    Last publish

    Collaborators

    • ar3s
    • matteobruni