Использование частиц JS с Гэтсби

Question

Я использую Particle JS Реагирует с компонентом Гэтсби.

Я начинаю с получения 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

Все уже работает как положено. Только будьте осторожны, чтобы по умолчанию частицы, отображаемые на холсте, были белыми. Следовательно, они будут невидимы, если фон будет белым, как в моем случае.

Изменил частицы на черный, и они появились. Ниже приведен минимальный рабочий пример:

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

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

заверните это return как

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