react-tsparticles
    TypeScript icon, indicating that this package has built-in type declarations

    1.37.5 • Public • Published

    banner

    react-tsparticles

    npm npm

    Official tsParticles ReactJS component

    Installation

    npm install react-tsparticles react

    or

    yarn add react-tsparticles react

    create-react-app

    Starting from version 1.17.0 there are two official create-react-app templates:

    • cra-template-particles: Simple ReactJS template with full screen particles, using JavaScript
    • cra-template-particles-typescript: Simple ReactJS template with full screen particles, using TypeScript

    You can simply install them using the create-react-app command like this:

    create-react-app your_app --template particles

    or

    create-react-app your_app --template particles-typescript

    How to use

    Code

    Examples:

    Remote url

    import Particles from "react-tsparticles";
    
    const App = () => {
      const particlesInit = (main) => {
        console.log(main);
    
        // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
      };
    
      const particlesLoaded = (container) => {
        console.log(container);
      };
    
      return (
        <Particles id="tsparticles" url="http://foo.bar/particles.json" init={particlesInit} loaded={particlesLoaded} />
      );
    };

    Options object

    import Particles from "react-tsparticles";
    
    const App = () => {
      const particlesInit = (main) => {
        console.log(main);
    
        // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
      };
    
      const particlesLoaded = (container) => {
        console.log(container);
      };
      return (
        <Particles
          id="tsparticles"
          init={particlesInit}
          loaded={particlesLoaded}
          options={{
            background: {
              color: {
                value: "#0d47a1",
              },
            },
            fpsLimit: 60,
            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,
                outMode: "bounce",
                random: false,
                speed: 6,
                straight: false,
              },
              number: {
                density: {
                  enable: true,
                  value_area: 800,
                },
                value: 80,
              },
              opacity: {
                value: 0.5,
              },
              shape: {
                type: "circle",
              },
              size: {
                random: true,
                value: 5,
              },
            },
            detectRetina: true,
          }}
        />
      );
    };

    Props

    Prop Type Definition
    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

    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 react-tsparticles

    DownloadsWeekly Downloads

    8,648

    Version

    1.37.5

    License

    MIT

    Unpacked Size

    360 kB

    Total Files

    19

    Last publish

    Collaborators

    • ar3s