2.9.3 • Published 1 year ago

inferno-particles v2.9.3

Weekly downloads
3
License
MIT
Repository
github
Last release
1 year ago

banner

inferno-particles

npm npm GitHub Sponsors

Official tsParticles Inferno component

Slack Discord Telegram

tsParticles Product Hunt

Installation

npm install inferno-particles

or

yarn add inferno-particles

How to use

Code

Examples:

Remote url

import Particles from "inferno-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);
    }

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

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

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

Options object

import Particles from "inferno-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);
    }

    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
        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: {
                            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,
                            outMode: "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

PropTypeDefinition
idstringThe id of the element.
widthstringThe width of the canvas.
heightstringThe height of the canvas.
optionsobjectThe options of the particles instance.
urlstringThe remote options url, called using an AJAX request
styleobjectThe style of the canvas element.
classNamestringThe class name of the canvas wrapper.
canvasClassNamestringthe class name of the canvas.
containerobjectThe instance of the particles container
initfunctionThis function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here
loadedfunctionThis 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

2.9.3

1 year ago

2.8.0

1 year ago

2.9.2

1 year ago

2.9.1

1 year ago

2.9.0

1 year ago

2.4.0

1 year ago

2.7.0

1 year ago

2.7.1

1 year ago

2.6.0

1 year ago

2.5.0

1 year ago

2.5.2

1 year ago

2.5.1

1 year ago

2.5.3

1 year ago

2.3.0

2 years ago

2.3.2

2 years ago

2.3.1

2 years ago

2.3.3

1 year ago

2.2.3

2 years ago

2.2.4

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.2.2

2 years ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.0

2 years ago

2.0.3

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.6

2 years ago

1.42.0

2 years ago

1.42.2

2 years ago

1.42.1

2 years ago

1.42.4

2 years ago

1.42.3

2 years ago

1.43.1

2 years ago

1.43.0

2 years ago

1.41.5

2 years ago

1.41.6

2 years ago

2.0.2

2 years ago

1.40.0

2 years ago

1.40.2

2 years ago

1.21.0

2 years ago

1.40.1

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

2.0.0-beta.2

2 years ago

1.41.1

2 years ago

1.41.0

2 years ago

1.22.0

2 years ago

1.41.3

2 years ago

2.0.0-beta.4

2 years ago

1.41.2

2 years ago

2.0.0-beta.3

2 years ago

1.22.3

2 years ago

1.41.4

2 years ago

1.22.1

2 years ago

1.22.2

2 years ago

1.20.6

2 years ago

1.20.5

2 years ago

1.20.3

2 years ago

1.20.4

2 years ago

1.20.1

2 years ago

1.20.2

2 years ago

1.20.0

2 years ago

1.19.0

2 years ago

1.18.4

2 years ago

2.0.0-beta.1

2 years ago

2.0.0-beta.0

2 years ago

1.18.3

2 years ago

1.18.2

3 years ago

1.18.1

3 years ago

1.18.0

3 years ago

1.17.1

3 years ago

1.17.0

3 years ago

1.16.3

3 years ago

1.16.2

3 years ago

1.16.1

3 years ago

1.16.0

3 years ago

1.15.0

3 years ago

1.14.2

3 years ago

1.14.1

3 years ago

1.14.0

3 years ago

1.13.4

3 years ago

1.13.3

3 years ago

1.13.2

3 years ago

1.13.1

3 years ago

1.13.0

3 years ago

1.12.2

3 years ago

1.12.1

3 years ago

1.12.0

3 years ago

1.11.2

3 years ago

1.11.1

3 years ago

1.11.0

3 years ago

1.10.0

3 years ago

1.9.4

3 years ago

2.0.0-alpha.7

3 years ago

1.9.3

3 years ago

1.9.2

3 years ago

1.9.1

3 years ago

1.9.0

3 years ago

1.8.0

3 years ago

1.7.3

3 years ago

2.0.0-alpha.6

3 years ago

1.7.2

3 years ago

1.6.0

3 years ago

1.7.1

3 years ago

1.7.0

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

1.4.0

3 years ago

2.0.0-alpha.5

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

2.0.0-alpha.4

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.0

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

2.0.0-alpha.3

3 years ago

1.1.12

3 years ago

2.0.0-alpha.2

3 years ago

2.0.0-alpha.1

3 years ago

2.0.0-alpha.0

3 years ago

1.2.0-alpha.5

3 years ago

1.2.0-alpha.4

3 years ago

1.2.0-alpha.3

3 years ago

1.2.0-alpha.2

3 years ago

1.2.0-alpha.1

3 years ago

1.2.0-alpha.0

3 years ago

1.1.11

3 years ago

1.1.9

3 years ago

1.1.10

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.1.0-beta.6

3 years ago

1.1.0-beta.5

3 years ago

1.1.0-beta.4

3 years ago

1.1.0-beta.2

3 years ago

1.1.0-beta.1

3 years ago

1.1.0-beta.3

3 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.1.0-alpha.14

4 years ago

1.0.8

4 years ago

1.1.0-alpha.13

4 years ago

1.1.0-alpha.12

4 years ago

1.0.7

4 years ago

1.1.0-alpha.11

4 years ago

1.1.0-alpha.10

4 years ago

1.1.0-alpha.9

4 years ago

1.1.0-alpha.8

4 years ago

1.1.0-alpha.7

4 years ago

1.1.0-alpha.5

4 years ago

1.1.0-alpha.6

4 years ago

1.1.0-alpha.3

4 years ago

1.1.0-alpha.4

4 years ago

1.1.0-alpha.1

4 years ago

1.1.0-alpha.2

4 years ago

1.0.6

4 years ago

1.1.0-alpha.0

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago