Node Packaged Masterfully

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

    2.1.4 • Public • Published

    banner

    react-particles

    npm npm

    Official tsParticles ReactJS component

    Slack Discord Telegram

    tsParticles Product Hunt

    Installation

    npm install react-particles

    or

    yarn add react-particles

    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-particles";
    import { loadFull } from "tsparticles";
    
    const App = () => {
      const particlesInit = async (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);
      };
    
      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-particles";
    import { loadFull } from "tsparticles";
    
    const App = () => {
      const particlesInit = async (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);
      };
    
      const particlesLoaded = (container) => {
        console.log(container);
      };
      return (
        <Particles
          id="tsparticles"
          init={particlesInit}
          loaded={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,
                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

    particles.json

    Find all configuration options here.

    You can find sample json configurations here 📖

    Demos

    Preset demos can be found here

    There's also a CodePen collection actively maintained and updated here

    Report bugs and issues here

    tsParticle Website

    Install

    npm i react-particles

    DownloadsWeekly Downloads

    505

    Version

    2.1.4

    License

    MIT

    Unpacked Size

    335 kB

    Total Files

    26

    Last publish

    Collaborators

    • ar3s