0.0.1-alpha.4 • Published 7 months ago

react-native-tsparticles v0.0.1-alpha.4

Weekly downloads
23
License
MIT
Repository
github
Last release
7 months ago

banner

react-tsparticles

npm npm

Official tsParticles ReactJS component

Installation

npm install react-tsparticles

or

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

or

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

PropTypeDefinition
widthstringThe width of the canvas.
heightstringThe height of the canvas.
optionsobjectThe options of the particles instance.
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

Find your parameters configuration here.

Errors

If you have typescript errors tsParticles uses TypeScript 3.9.6 so try installing at least 3.8 for import type syntax.

Demos

The demo website is here

https://particles.matteobruni.it

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

https://codepen.io/collection/DPOage