wufe / react-particles-js Goto Github PK

(6,28): error TS7016: Could not find a declaration file for module 'react-particles-js'. '/Users/clacey/caprona-ui/client/node_modules/react-particles-js/lib/particles.js' implicitly has an 'any' type.

On the polygon example im trying to change the color for the particles. I was able to change it for the particles and line_linked but not for this part.

What's the option for changing the color of this? I've looked at the docs and can't seem to find it.

when I enter codes in the input box, the canvas will redrawn like the page refresh....how to solve this problem.
thanks~

This is my code.

This is result of my code

My expectation the shape return star

Hey thanks for creating the awesome library.

Is it possible to add multiple Images? I saw options in the library for 'images' but I'm not sure how to include them in the JSON object.

I have tried including the following:

images: { ["imageone", "imagetwo"] }

but it doesn't seem to work

I want to tie the p.js params to an object in the state of a parent component (which renders the particles component), by passing it as a prop, so that I can update the state (e.g. change the size of the particles) and have that be immediately reflected. It doesn't seem to work though.

<Particles
  width="100%"
  height="100%"
  params={this.state.ParticlesConfig}
  style={{ width: "100%", position: "absolute", zIndex: -1, backgroundColor: "#000" }}
 />

I've verified that the params are actually being updated by using the React Chrome devtools and inspecting the props of the Particles component.

The library works well with the shapes provided but does not load images if I pass in

shape {
  type: "image",
  image: {
    src: "url_to_svg_or_png",
    width: 100,
	height: 100
  }
}

The error encountered is:

Uncaught TypeError: Cannot read property 'clearRect' of undefined

Looking at this example
https://codepen.io/anon/pen/YREMLO there are only a few lines/dots.

When I use the same params in the react component

<Particles
    params={{
        "particles": {
            "number": {
                 "value": 80,
                 "density": {
                      "enable": true,
                          "value_area": 1000
                  }
            },
       },
  "retina_detect": true
}} />

it looks like this https://imgur.com/a/zjzZbXF.

There are way more lines connecting the dots.
Why is that?

Source code:

I probably have done something wrong. Here is the my particles setup:

import React from 'react';

import styled from 'styled-components';

import ParticlesCanvas from 'react-particles-js';

const StyledParticlesWrapper = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
`;

export default Particles = props => {
  return (
    <StyledParticlesWrapper>
      <ParticlesCanvas params={{
        particles: {
          number: {
            value: 80,
            density: {
              enable: true,
              value_area: 800
            }
          }
        }
      }} />    
    </StyledParticlesWrapper>
  );
}

Behaviour

When the page is loaded on a big screen size, density works. When resizing to a small enough screen size, density sometimes works, sometimes doesn't. I tested the app on iPhoneX and Galaxy S9 screen size as well as responsive mode.

Particles when loaded on a big screen size:

Particles when being resized (Sometimes it works):

Particles when being resized (Sometimes it doesn't work):

How should I fix it? Thanks in advance

My project repo: Eagle Nest
The particles file: Particles.js

what about the stats ?

Currently i'm using this package in some of my projects. Everywhere i use this i get this sort of "exploding" pack of particles. Am I doing something wrong or is this a bug?
No matter my config it happens with all of them.

Example

If you want me to provide more information let me know!
Thanks.

I'm develop components for a landing page in React 16, i'm using @storybook/react to show components features. Storybook render components into an iframe. I've a problem when use react-particles-js, show follow error:

I have tested with create-react-app and all is ok, but when i put react-particles-js into iframe tag, show the same error.

import Particles from 'react-particles-js';

<Particles/>
Working ok!

<iframe> <Particles/> </iframe>
Not working!

I've also been tracing the library and I think there's some problem in the following piece of code (particle.js - line 1367):
Math.sqrt(s * s + o * o) <= e.radius + n.radius && (e.x = t ? t.x : Math.random() * i.width, e.y = t ? t.y : Math.random() * i.height, r.checkOverlap(e));

All settings that I set is all working except the onHover repulse, there's nothing happening on the particles when I move my mouse around the canvas.

This is the settings I used

particles: { 
      number: {
        value: 80,
        density: {
            enable: true,
            value_area: 800
        }
      },
      color: {
        value: "#ffffff"
      },
      shape: {
        type: "circle",
        stroke: {
            width: 0,
            color: "#000000"
        },
        polygon: {
            nb_sides: 5
        }
      },
      opacity: {
        value: 0.5,
        random: false,
        anim: {
          enable: false,
          speed: 1,
          opacity_min: 0.1,
          sync: false
        }
      },
      size: {
        value: 3,
        random: true,
        anim: {
          enable: false,
          speed: 40,
          size_min: 0.1,
          sync: false
        }
      },
      line_linked: {
        enable: true,
        distance: 150,
        color: "#ffffff",
        opacity: 0.4,
        width: 1
      },
      move: {
        enable: true,
        speed: 3,
        direction: "none",
        random: false,
        straight: false,
        out_mode: "out",
        bounce: false,
        attract: {
            enable: false,
            rotateX: 600,
            rotateY: 1200
        }
      },
      interactivity: {
        detect_on: "canvas",
        events: {
            onhover: {
                enable: true,
                mode: "repulse"
            },
            onclick: {
                enable: true,
                mode: "push"
            },
            resize: true
        },
        modes: {
            grab: {
                distance: 400,
                line_linked: {
                    opacity: 1
                }
            },
            bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 8,
                speed: 3
            },
            repulse: {
                distance: 200,
                duration: 0.4
            },
            push: {
                particles_nb: 4
            },
            remove: {
                particles_nb: 2
            }
        }
    },
    retina_detect: true
}

I used https://vincentgarreau.com/particles.js to generate the settings.

The docs suggest to npm install [email protected] but beta.4 doesn't exist on npm.

Hello!
Thank you so much for so beautiful react module!
I'm using it on my study project now.
Unfortunately I can't use the "Interactivity" parameter :(
It looks this way in my code:

And I got this error:

Other Particles features are already works perfect.
Can you kindly help me with this issue? How I can enable Particles Interactivity in me React App?
Thank you in advance!

I'm trying to disable the links between particles so it's just dots but I can't seem to get this to work. Here's how my component looks:

<Particles className="particles" params={{
          line_linked: {
            enable: false,
          },
 }} />

Edit: It needs to be inside particles: {}

There is a section that i want to make it position:fixed so that when i scroll down, i still can see the particles.

<div className={cx('first-wrapper', 'wrapper')}>
	<Particles params={{
                    'particles': {
                        'line_linked': {
                            'shadow': {
                                'enable': true,
                                'color': '#ff8d47',
                                'blur': 7
                            }
                        },
                        'color': {
                        	'value': '#ff8d47'
                        },
                        'number': {
                        	'value':70
                        }
                    }
                }} style={{position: 'absolute', width: '100%', height: '100%', left:0, top:0}} />
</div>

the class, 'wrapper', has this style

height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all .4s ease-in;
position: fixed;

However, When I scroll down, the particles update themseleves, new angles, new location etc. you know, when you refresh pages, the particles set differently because it sets randomly.
I want them to be fixed.
I dont understand why it updates itself. please help me :'(

Component does not pass react strict mode. Need to remove "componentWillMount" and "componentWillUpdate". Since they don't seem to actually do anything it should be fine.

Cheers!

index.js:1452 Warning: Unsafe lifecycle methods were found within a strict-mode tree:

componentWillMount: Please update the following components to use componentDidMount instead: SideEffect(NullComponent), t

componentWillUpdate: Please update the following components to use componentDidUpdate instead: t

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

The demo website is down: https://particles-demo-dedqzqdvns.now.sh/

Can you edit your package Json and import @types as dev dependencies? I have encountered conflicts with react typings.

Hello, and thanks for your lib.
I'm currently trying webpack2/jsx and so far everything works as expected expect I cannot find a way to to understand how you apply this Particles to a specific element. Do you have any example of the implementation that goes a little deeper than:

import Particles from 'react-particles-js';
 
class App extends Component{
  
    render(){
        return (
            <Particles params={{
            		particles: {
            			line_linked: {
            				shadow: {
            					enable: true,
            					color: "#3CA9D1",
            					blur: 5
            				}
            			}
            		}
            	}}/>
        );
    };
 
}

My problem is that I have a component with a canvas (it can be any other html tag) and I'd like to apply the effect on this specific canvas but cannot find a way...

Thanks in advance for your help

Hi, I tried react-particles-js in my project, but there is an error in console:

"Uncaught TypeError: Super expression must either be null or a function, not undefined"

my react version is 0.14.2.

Please...

does it support IE9? Mine seems doesn't work, even when I removed all the params, still not working

it seems that you use visual studio code, with settings for this project.
it would be an improvement committing this folder since we could work with the same tooling and settings.

these settings could still be overriden per-user but provide a general code-style and toolchain

My step is follow ：

1 create react project using create-react-app ,
2 npm install react-particles-js.
3 import lib using import Particles from 'react-particles-js';
4 add to app component

But when I use npm start. the page is blank. no particle effect show.

My App.js is follow:
` import React, { Component } from 'react';
import './App.css';
import Particles from 'react-particles-js';

class App extends Component {
render() {
return (
);
}
}
export default App;
`

My package :
{ "name": "testpaticle", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.5.2", "react-dom": "^16.5.2", "react-particles-js": "^2.3.0", "react-scripts": "1.1.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

This is my code:

<Particles
params={{
"number": {
"value": 800,
"density": {
"enable": true,
"value_area": 800
}
},
"particles": {
"color": {
"value": "#AABBDD"
},
line_linked: {
shadow: {
enable: true,
color: "#AABBCC",
blur: 5
}
}
}
}}>

It is always some. It seems whatever I do I get same result, so params is not working!

I tried to measure performance with this demo (https://rpj.bembi.org/).
When the first load it's going to stuck for a while and then it will paint the dom (fps down to 8-10).

https://vincentgarreau.com/particles.js/
This lib has the same behavior.

Is there anyway to improve this?

I'm on Create React App. It uses Jest as its test runner
Upon run test, this was the error

TypeError: Cannot read property 'clearRect' of null

at e.value (node_modules/react-particles-js/lib/particles.js:604:26)
     at e.value (node_modules/react-particles-js/lib/particles.js:977:214)
     at e.value (node_modules/react-particles-js/lib/particles.js:988:23)
     at e.value (node_modules/react-particles-js/lib/particles.js:1002:48)
     at e.value (node_modules/react-particles-js/lib/particles.js:670:44)
     at t.<anonymous> (node_modules/react-particles-js/lib/particles.js:101:85)
     at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
     at ReactUpdatesFlushTransaction.close (node_modules/react-dom/lib/ReactUpdates.js:59:24)
     at ReactUpdatesFlushTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
     at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
     at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/ReactUpdates.js:89:32)
     at Object.flushBatchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:172:19)
     at ReactDefaultBatchingStrategyTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
     at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
     at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
     at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
     at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:319:18)
     at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
     at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
     at Object.<anonymous>.it (src/App.test.js:7:48)
     at process._tickCallback (internal/process/next_tick.js:103:7)

My step is follow ：

1 create react project using create-react-app ,
2 npm install react-particles-js.
3 import lib using import Particles from 'react-particles-js';
4 add to app component

But when I use npm start. the page is blank. no particle effect show.

My App.js is follow:
<Particles params={{ "particles": { "number": { "value": 50 }, "size": { "value": 3 } }, "interactivity": { "events": { "onhover": { "enable": true, "mode": "repulse" } } } }} />

My package :
{ "name": "testpaticle", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.5.2", "react-dom": "^16.5.2", "react-particles-js": "^2.3.0", "react-scripts": "1.1.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

Upgrading to the latest version of React v16 causes type conflicts within react-particles-js.

If the react-particles-js dependencies are updated to the latest versions of react, react-dom, @types/react , & @types/react-dom, then all type errors are resolved, however a runtime error occurs when attempting to render particles:

I'm guessing this is due to changes in react-dom in v16.

Is there any mecanisme/hook to generate custom images. My use case would be to insert random SVG inside shapes. Thank you for your work!

Its density is too high how to make it responsive?

I am using this library to create a dynamic background, and am trying to get it so the color of the particles shifts every few seconds. Currently it seems changing the parameters on the <Particles /> component causes a full re-render and causes the particles to appear to "jump".

I've created a sandbox demo that shows that here

Would it be reasonable to have certain parameters (like color) not cause a full re-render?

I've poked through the code a bit, but was curious if you had an opinion @wufe.

hello! thankfully I found this library, I have two small questions.

1. How do I set the background color(I've tried configuring it in the params object just that doesn't seem to have an effect)
   2.How would you suggestI render the rest of my app's components?

• as of now, the particles render to the screen but not anything else.

Here's what I am working with:

import Main from './components/Main';
import React from 'react';
import ReactDOM from 'react-dom';

import Particle from './container/Particle'

ReactDOM.render(
  <Particle>
    <Main />
  </Particle>,
  document.getElementById('app')
)

I've abstracted Partcle into it's own file becasue of it's length

Would be nice to support child components since using CSS absolute method doesn't trigger mouse hover on particles when you have another component blocking it. adding pointer-events: none; will remove scroll effect.

<Particles>
    <div>Hello World</div>
</Particles>

For the performance improvement, I suggest that replace React.Component with React.PureComponent. Otherwise, check props in shouldcomponentupdate, don't update when props is the same.

The animation is very slow and images keep flashing. I tried setting the "fps_limit" property without success, any ideas ?

Wondering if you plan on supporting polygon option?

ie. VincentGarreau/particles.js#202

Hi,
I am trying to run the simple possible example of Particles with Gatsby, and It seems to not work for any combination. My index file looks like:

import React from "react"
import Particles from 'react-particles-js';


export default () => (
    <div>
        <Particles/>
    </div>
);

I can see that the canvas is added into DOM, but nothing is shown. Is it a correct approach?

React version: 16.2.0
Gatsby version: 1.9.207
Particle version: 2.1.0

I wanted to optimize my web app with Code Splitting by using the new React.lazy and React.Suspense (I am useing react version 16.6.3). But apparently, when trying to use it with react-particles I get the following error

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (react-dom.development.js:55)
    at scheduleWork (react-dom.development.js:18406)
    at Object.enqueueSetState (react-dom.development.js:12313)
    at t../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:372)
    at t.value (particles.js:1)
    at t.value (particles.js:1)
    at commitLifeCycles (react-dom.development.js:15976)
    at commitAllLifeCycles (react-dom.development.js:17262)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:17458)
    at completeRoot (react-dom.development.js:18912)
    at performWorkOnRoot (react-dom.development.js:18841)
    at performWork (react-dom.development.js:18749)
    at performSyncWork (react-dom.development.js:18723)
    at requestWork (react-dom.development.js:18592)
    at retrySuspendedRoot (react-dom.development.js:18288)
    at wrapped (scheduler-tracing.development.js:204)

It works with all other components except react-particles, although I am not 100% sure this is a issue on react-particles side.

Here's the code I used:

/* At top level */
const Particles  = React.lazy(() => import('react-particles-js'))

/* In render () */
<Suspense fallback={<Spinner />}>
    <Particles className='particles-js' params={particlesConfig} />
</Suspense>

Any ideas?

Hello,

Can you tell me what I do wrong with component ? I've checked particles.js.demo from your link for custom, I've checked IParams on your file but I cant custom anymore, nothing happen.

   <Particles
              style={{
                position:'absolute',
                top:'0',
                left:'0'
              }}
              params={{
                particles: {
                  opacity:{
                    value: 0
                  },
                  color: {
                    value: '#FFF'
                  }
                }
              }}
            />

Best regards,

I used react-particle-js on my page, On this page i jump to another page and back, it will throw this error.

this is my code screenshots

my step is follow

1 create react project by create-react-app
2 npm install react-particles-js
3 import libs
import Particles from 'react-particles-js';
4 add components

But, the page is blank after i start page by npm start.

By the way. I try the demo of react-particles-js. the demo is OK
But the react project is still no working even I import sass file and component ParticaleContainer.

How can I merge the react-particles-js into the react-project created by create-react-app??
thanks @wufe

Expected Behavior
Canvas would responsively resize to fit window.

Actual Behavior
Height shrinks to half of canvas width during resize.
W:H scaling ratio appears to be set to 2:1.

Specifications
Version: 2.1.0
Browsers: Firefox 57, Chrome 62
package.json:

"dependencies": {
"canvas-particle-network": "^1.5.0",
"material-ui": "^1.0.0-beta.21",
"material-ui-icons": "^1.0.0-beta.17",
"material-ui-search-bar": "^1.0.0-beta.3",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-particles-js": "^2.1.0",
"react-scripts": "1.0.17",
"react-tap-event-plugin": "^3.0.2"
}

Possible Solution:
Stackoverflow

The solution is likely relatively simple. I however don't understand how preventing the 2:1 scale ratio is implemented in the React component. Upon resolving I can add a note to the Readme.md

Edit: formatting

I wrapper all the components that have state changes into a wrapper but the Particles component still gets re-rendered on changes.

render() {
   const { isSignedIn, imageUrl, route, box, user } = this.state;
   return (
     <div className="App">
       <Particles className='particles' params={particlesOptions} />
       <ComponentsWrapper 
         isSignedIn={isSignedIn}
         imageUrl={imageUrl}
         route={route}
         box={box} 
         user={user}
         loadUser={this.loadUser}
         onInputChange={this.onInputChange}
         onImageSubmit={this.onImageSubmit}
         onRouteChange={this.onRouteChange}
       />
     </div>
   );
 }
}

In this project, i have put some html elements inside the particles div. I am now trying to migrate this pen into my react portfolio. I wasn't able to put any elements into the Particles div like so:

<Particles params={this.config} className="particles-js">
  <h1>Hello World</h1> // <-- Element does not show up
</Particles>

I think this is related to the canvas element that is being returned, but is there a workaround for this?

Error in create-react-app environment and ^2.3.0

import { Particles } from 'react-particles-js'

Error : " has no exported member 'Particles'