React particles animation background component

Overview

particles-bg

NPM JavaScript Style Guide

React component for particles backgrounds

This project refers to the source code of the Proton official website, I packaged it into a component. You can use it casually in your own projects. Thanks to the great author.

A vue.js version of particles-bg-vue is here https://github.com/lindelof/particles-bg-vue

Online demo

Install

npm install --save particles-bg

Usage

import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <ParticlesBg type="circle" bg={true} />
      </>
    )
  }
}

Parameter Description

<ParticlesBg color="#ff0000" num={200} type="circle" bg={true} />

* type - Is the type of particle animation

Is the type of particle animation, random is a random selection. You are also free to customize use custom.

"color"
"ball"
"lines"
"thick"
"circle"
"cobweb"
"polygon"
"square"
"tadpole"
"fountain"
"random"
"custom"

* num - The number of particles emitted each time, generally not set

* color - The background color or particle color of the particle scene

Notice: which should be an array under type=color

* bg - Set to html background

Is set the following properties

position: "absolute",
zIndex: -1,
top: 0,
left: 0

About Custom

You can use type="custom" to achieve a higher degree of freedom for the particle background.

  let config = {
      num: [4, 7],
      rps: 0.1,
      radius: [5, 40],
      life: [1.5, 3],
      v: [2, 3],
      tha: [-40, 40],
      // body: "./img/icon.png", // Whether to render pictures
      // rotate: [0, 20],
      alpha: [0.6, 0],
      scale: [1, 0.1],
      position: "center", // all or center or {x:1,y:1,width:100,height:100}
      color: ["random", "#ff0000"],
      cross: "dead", // cross or bround
      random: 15,  // or null,
      g: 5,    // gravity
      // f: [2, -1], // force
      onParticleUpdate: (ctx, particle) => {
          ctx.beginPath();
          ctx.rect(particle.p.x, particle.p.y, particle.radius * 2, particle.radius * 2);
          ctx.fillStyle = particle.color;
          ctx.fill();
          ctx.closePath();
      }
    };

    return (
      <div>
        <SignIn />
        <ParticlesBg type="custom" config={config} bg={true} />
      </div>
    )

Similar projects

Maybe you will like these two projects, they will also make your page flourish

License

https://opensource.org/licenses/MIT

Issues
  • Particle.js Module parse failed: Unexpected token (13:5)

    Particle.js Module parse failed: Unexpected token (13:5)

    I really like this package. But when I am trying to use it in react-nice-resume, I am getting below error.

    Failed to compile.

    
    ./node_modules/proton-engine/src/core/Particle.js
    Module parse failed: Unexpected token (13:5)
    You may need an appropriate loader to handle this file type.
    | export default class Particle {
    |   /** @type string */
    |   id = ''
    |
    |   /** @type {{p:Vector2D,v:Vector2D,a:Vector2D}} */
    

    Any suggestions?

    opened by pprachit09 6
  • Particles are cut off when page is scrolled down

    Particles are cut off when page is scrolled down

    I have a problem with the particles as they are not rendered below the main screen. scrolling down, they are lost. Is there some-sort of prop that i can include or as css style that can be applied to fix that ? Thanks.

    opened by oliverilm 5
  • sometimes I get canvas is null error

    sometimes I get canvas is null error

    Hi using this to aww my auth routes. Thank you a lot. I am getting canvas is null error on refreshes of the page. Not all the time but sometimes. Hope below screenshot helps:

    Using React:

    "react": "^16.8.4", "particles-bg": "^2.5.0",

    https://i.postimg.cc/LsywpW6r/canvas-Is-Null.png

    opened by osmancakir 5
  • Add typescript declaration files

    Add typescript declaration files

    As some apps are built nowadays with typescript may be better to create Declaration Files.

    opened by strdr4605 4
  • Running in typescript without custom config fails to build

    Running in typescript without custom config fails to build

    Description First, a very cool dynamic background package. Thanks for sharing. The config parameter is mandatory and thus the following resulted in build error:

    <ParticlesBg num={80} type="cobweb" bg={true} />
    

    The error is:

    No overload matches this call.
      Overload 1 of 2, '(props: Readonly<Props>): ParticlesBg', gave the following error.
        Property 'config' is missing in type '{ num: number; type: "cobweb"; bg: true; }' but required in type 'Readonly<Props>'.
      Overload 2 of 2, '(props: Props, context?: any): ParticlesBg', gave the following error.
        Property 'config' is missing in type '{ num: number; type: "cobweb"; bg: true; }' but required in type 'Readonly<Props>'.
    

    Potential fix Not sure if that works for any case, but at least for me editing the index.d.ts and changing line 55 to make the config parameter optional worked.

      export interface Props {
    ...
        config?: ConfigProp;
    ...
    
    opened by ehud-am 3
  • SSR support increase

    SSR support increase

    I enabled SSR, whether can ban/SRC/particles/Canvas JSX window.addEventListener running on the server?

    So you can support SSR, thanks

    opened by eugle 3
  • Front Overlay

    Front Overlay

    Would love to use this as win or points animation overlay. Can we adopt to allow style transfer in props?

    opened by Deamoner 2
  • ReferenceError: window is not defined

    ReferenceError: window is not defined

    First of all I want to say I really appreciate your work, a best animation library ! So I'm trying to use particles-bg with next.js. I made a simple component like this.

     import React from "react";
     import ParticlesBg from "particles-bg";
     import Box from "@material-ui/core/Box";
     import Paper from "@material-ui/core/Paper";
     import Grid from "@material-ui/core/Grid";
     import Button from "@material-ui/core/Button";
    
    
     const Products = () => {
       return (
         <Box>
           <Grid container spacing={3}>
             <Grid item xs={12}>
               <Paper>
                 <Button
                   variant="contained"
                   color="primary"
                   href="#contained-buttons"
                 >
                   Check the product
                 </Button>
               </Paper>
             </Grid>
           </Grid>
           <ParticlesBg type="circle" bg={true} />
         </Box>
       );
     };
    
     export default Products;
    

    And when I run the next.js as dev. It raise this error.

    Server Error
    ReferenceError: window is not defined
    
    This error happened while generating the page. Any console logs will be displayed in the terminal window.
    Call Stack
    <unknown>
    file:///G:/WORK/Personal/Happy%20Base/LandingPage/landing-page/node_modules/raf-manager/build/RAFManager.min.js (9:254)
    <unknown>
    file:///G:/WORK/Personal/Happy%20Base/LandingPage/landing-page/node_modules/raf-manager/build/RAFManager.min.js (9:461)
    <unknown>
    file:///G:/WORK/Personal/Happy%20Base/LandingPage/landing-page/node_modules/raf-manager/build/RAFManager.min.js (9:84)
    Object.<anonymous>
    file:///G:/WORK/Personal/Happy%20Base/LandingPage/landing-page/node_modules/raf-manager/build/RAFManager.min.js (9:153)
    Module._compile
    internal/modules/cjs/loader.js (1063:30)
    Object.Module._extensions..js
    internal/modules/cjs/loader.js (1092:10)
    Module.load
    internal/modules/cjs/loader.js (928:32)
    Function.Module._load
    internal/modules/cjs/loader.js (769:14)
    Module.require
    internal/modules/cjs/loader.js (952:19)
    require
    internal/modules/cjs/helpers.js (88:18)
    

    Any clues how to fix this ? Thanks in advance !

    opened by kaxterzz 2
  • Adjust particles on window resize

    Adjust particles on window resize

    As shown in the example below. If initially, the window is small and I make it bigger, the particles don't cover all background space.

    image

    Probably it's not a big issue.

    opened by strdr4605 1
  • RAF-Manager is throwing window is not defined.

    RAF-Manager is throwing window is not defined.

    After installation of particles-bg - "^2.5.5", the first time when running it worked. And now when I did npm i and tried to run the projects, raf-manager is throwing this error. I don't see raf-manager GitHub repo, even npm doesn't have it. If in case something on raf-manager has changed or deprecated, please update particles-bg package as well. image

    opened by zachjonesnoel 3
  • Can't change z-index to 0

    Can't change z-index to 0

    Have any way to set your own styles ?

    opened by rINAtvERESHAGIN 1
  • More options

    More options

    I love this package! I just wish I could use the "lines" option without having the grey lines that stick. Could someone help me get this achieved? Maybe I'm just not smart enough to figure it out...

    opened by oliverlevay 3
Releases(v2.5.0)
Owner
lindelof
✈️Web developer 👴Playwright 🌋Python developer 🐝Guitarist 🌎 Traveller & I like react / react-native / typescript❤️ 💛
lindelof
react-health-card 🏥💳 An awesome react health card component.

react-health-card An awesome health card component. Installation yarn add react-health-card or npm install react-health-card --save Usage import Healt

medipass 26 Nov 8, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 73.4k Dec 2, 2021
Font Awesome 5 React component

react-fontawesome Font Awesome 5 React component using SVG with JS Documentation How to Help Contributors Releasing this project (only project owners

Fort Awesome 3.5k Nov 26, 2021
A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

Uber Open Source 7.1k Nov 25, 2021
The Most Complete React UI Component Library

PrimeReact PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation. Download Prim

PrimeFaces 2.3k Nov 25, 2021
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 242 Nov 28, 2021
Rheostat is a www, mobile, and accessible slider component built with React

Rheostat A mobile, tablet, desktop, and accessible slider for the web. Install npm install rheostat Initialize As of v3.0.0, the rheostat project reli

Airbnb 1.6k Nov 23, 2021
A simple React component that is resizable with a handle.

React-Resizable View the Demo A simple widget that can be resized via one or more handles. You can either use the <Resizable> element directly, or use

RGL 1.7k Nov 30, 2021
📕React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

?? React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

Ankit Kumar Pandit 430 Nov 22, 2021
React Component for Swapping on the Serum DEX

@project-serum/swap-ui A reusable React component for swapping on the Serum DEX. The Solana program can be found here. Usage Install First install the

Project Serum 59 Nov 28, 2021
A React Component library for buliding modern applications easily & quickly.

A React Component library for building modern applications easily & quickly

Elementz 336 Nov 23, 2021
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Kiwi.com 1.1k Nov 27, 2021
A React component generation for app prototyping

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

null 11 Aug 7, 2021
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Nov 8, 2021
Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

Juno Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps. base on MATERIAL-UI. Explore Juno with the

RingCentral 24 Nov 23, 2021
A React component library for Tailwind projects

Elora - A React component library for Tailwind Elora is a component library built in TypeScript for React developers who use Tailwind in their project

Brett Thurston 15 Oct 9, 2021
A powerful, flexible, lightweight and animated vertical news ticker component for React.

A powerful, flexible and animated vertical news ticker plugin for React. React Advanced News Ticker provides multiple callbacks and methods to allow a maximum flexibility and an easy implementation into any project.

Ahmet Can Aydemir 19 Oct 12, 2021
Periqles is a React component library for Relay and Apollo that makes it easy to collect user input.

periqles Painless forms for GraphQL. Demo → Periqles is a React component library for Relay and Apollo that makes it easy to collect user input. Periq

OSLabs Beta 114 Oct 14, 2021
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor

React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Microsoft 58 Nov 24, 2021