将 ParticleJS 与 Gatsby 结合使用

Question

我正在使用带有 gatsby 的 ParticleJS React 组件。

我从获取 npm install react-particles-js 开始。

我从一个非常简单的例子开始：

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

export default () => (
  <div>
  <Particles params={{
        "particles": {
            "number": {
                "value": 50
            },
            "size": {
                "value": 3
            }
        },
        "interactivity": {
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "repulse"
                }
            }
      }
    }}/>
  </div>

)

呈现的 HTML 是这样的：

<div>
   <div id="tsparticles">
      <canvas class="tsparticles-canvas-el" width="3584" height="1792" style="width: 100%; height: 100%;">
      </canvas>
   </div>
</div>

仍然没有任何显示！我在这里遗漏了什么吗？

Answer 1

像

一样用return包装它

export default () => (
  return (
/** yours here) 
)

Answer 2

这是一个将库与 Gatsby js 结合使用的已知问题，但有解决方法，您可以查看此 GitHub 问题：https://github.com/Wufe/react-particles-js/issues/23 这是一个复制品：https://codesandbox.io/s/goofy-lake-i0c7z?file=/src/pages/index.js

Answer 3

一切都已按预期运行。请注意，默认情况下 canvas 显示的粒子是白色的。因此，如果像我这样的背景是白色，它们将是不可见的。

将粒子更改为黑色，它们出现了。下面是一个最小的工作示例：

<Particles
      params={{
        particles: {
          color: {
            value: "#000000"
          }
        }
      }}
    />

将 ParticleJS 与 Gatsby 结合使用

Using ParticleJS with Gatsby

javascript

reactjs

particles.js

gatsby