Dynamic Colour: TypeError 'loadCanvas'

[hmajid2301]

Whenever I try to set the particle colour dynamically using a React context I get the following Error in Chrome (not in firefox, in firefox it works fine). I'm using version 3.3.0 of this library.

TypeError: Cannot read property 'loadCanvas' of undefined
f.<anonymous>
node_modules/react-particles-js/cjs/particles.js:1

Where the component im using looks something like this: Note theme will either be light or dark.

import React, { useContext } from 'react';
import ParticlesEffect from 'react-particles-js';

import { ThemeContext } from '~/providers/Theme';

...

const Particles = () => {
  const { theme } = useContext(ThemeContext);
  const color = theme === 'light' ? '#000' : '#fff';

  return (
    <ParticlesEffect
      className="h-full w-full absolute inset-0 pointer-events-none"
      params={{
        particles: {
          number: {
            value: 160,
            density: {
              enable: false,
            },
          },
          color: {
            value: color,
          },
          size: {
            value: 5,
            random: true,
            anim: {
              speed: 3,
              size_min: 0.7,
            },
          },
          line_linked: {
            enable: false,
          },
          move: {
            random: true,
            speed: 3,
          },
        },
        interactivity: {
          events: {
            onhover: {
              enable: true,
              mode: 'bubble',
            },
            onclick: {
              enable: true,
              mode: 'repulse',
            },
          },
          modes: {
            bubble: {
              distance: 250,
              duration: 2,
              size: 0,
              opacity: 0,
            },
            repulse: {
              distance: 400,
              duration: 4,
            },
          },
        },
      }}
    />
  );
};

If I change

color: {
  value: color,
},

to

color: {
  value: "#000",
},

Everything works as expected. Any help would be appreciated thanks.

[hmajid2301]

This could be related to #132 both are loading in values dynamically.

[matteobruni]

Hi @hmajid2301

I tried to replicate the issue here: https://codesandbox.io/s/friendly-poitras-egoj5?file=/src/App.js but everything seems ok

Probably this sample is missing something, are you able to replicate the issue there?

I already took the ThemeContext from your repository

[hmajid2301]

Hmm thanks for that, it looks to be related to gatsby after updating my gatsby-browser.js to this seems to have fixed the issue.

export const wrapRootElement = ({ element }) => (
  <ThemeContextProvider>
    <div className="root overflow-hidden">{element}</div>
  </ThemeContextProvider>
);