Gatsby + Particles

[patrykmat]

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

[LunarBiscuit]

I am also having this problem.

Locally, running gatsby develop is fine, and this works without an issue, however when you build and deploy to Netlify or similar platforms, it does not seem to work - perhaps something to do with the build/bundle process?

[blaskovicz]

I'm not using Gatsby, but i'm having a similar issue via create-react-app. I just get an empty canvas with no javascript errors nor build errors.

[guillaumeLamanda]

Same here

[wufe]

Did you change color of the particles? Without params the canvas renders white particles ( not visible with a white background ).

Checkout this minimalistic example, it is based on a create-react-app layout:

[wdavidw]

It works for me: react 15.6.2 gatsby 1.9.259 react-particles-js 2.1.2

[OR13]

Not working for me, same error. canvas is there, but no rendered particles... i believe this is a module loader issue with gatsby.

  "react": "^16.2.0",
  "gatsby": "^1.9.261",
  "react-particles-js": "^2.1.3",

FWIW same thing happens when just use particles.js directly... I think this is gatsby webpack related...

[veksen]

It works for me on Gatsby and I'm deployed on Netlify. Sample, minimal code:

"gatsby": "^1.9.247",
"particles.js": "^2.0.0",
"react-particles-js": "^2.1.3"

import React from 'react'
import { css } from 'emotion'
import Particles from 'react-particles-js'

const heroStyles = css`
  background: linear-gradient(#001d43 0%, rgba(0, 29, 67, 0) 75%), #0f5783;
  color: #fffbf7;
  position: relative;
`

const particlesStyles = css`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
`

const Hero = () => (
  <div className={heroStyles}>
    <Particles
      className={particlesStyles}
      params={{
        particles: {
          move: {
            speed: 3,
          },
        },
      }}
    />
  </div>
)
export default Hero

[OR13]

it is working with the sample provided in a brand new vanilla gatsby setup...

time to eliminate all my dependencies, it must be something I have added that caused this to stop working.

[RobertoMSousa]

It's working here, check my repo to see how I did it. https://github.com/RobertoMSousa/gatsbyjs_hello_world

[paulsabandal]

It's working for me. I just checked @RobertoMSousa repo.

https://github.com/RobertoMSousa/gatsbyjs_hello_world/blob/master/src/components/header.js

[lljr]

Hi, is there a way to add it in the background?

[RobertoMSousa]

yes, mine is on the "background". you can place the canvas behind with a div over the canvas. Then you place what you need on that div.

[lljr]

nvm I was able to do it 😳

[lljr]

@RobertoMSousa thanks

[jilliankeenan]

I had a look at @RobertoMSousa and my code is doing the same, I can get the particles to render but they aren't responsive on mouse hover when using Gatsby? Is there a resolve for this?

[wufe]

@jilliankeenan I might guess there's something in front of the canvas, or the position of the canvas itself is not set to be relative.

I suggest you to check the library's demo code or this sandbox where you can fork the code, modify it and send back to this conversation.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[arhoy]

You might see a white canvas because the particles themselves are also white. Try going to inspecting the canvas element and seeing if it is rendered there and changing the background to black.

[lindelof]

Of course you can also use this library https://github.com/lindelof/particles-bg

[Mayron]

Not working for me. It looks great in gatsby develop but breaks in gatsby build.

EDIT: For me it was the gatsby-plugin-preact plugin causing the issue. Swapping out React for Preact breaks this package.