React-native-tsparticles NPM

react-tsparticles

Official tsParticles ReactJS component

Installation

npm install react-tsparticles

yarn add react-tsparticles

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

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

How to use

Code

Example:

import Particles from "react-tsparticles";

class App extends Component {
  render() {
    return (
      <Particles
        id="tsparticles"
        options={{
          background: {
            color: {
              value: "#0d47a1",
            },
          },
          fpsLimit: 60,
          interactivity: {
            detectsOn: "canvas",
            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.
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