React Particles JS

🎉Blazing fast ParticlesJS wrapper for ReactJS. Check out the demo.

Install

You can install this library via NPM or YARN.

NPM

npm i @blackbox-vision/react-particles

YARN

yarn add @blackbox-vision/react-particles

Usage

The usage is really simple:

// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Particles } from '@blackbox-vision/react-particles';

const ParticlesJs = () => (
  <Particles
    id="simple"
    width="auto"
    height="100vh"
    style={{
      backgroundColor: 'blue',
    }}
    params={{
      particles: {
        number: {
          value: 50,
        },
        size: {
          value: 3,
        },
      },
      interactivity: {
        events: {
          onhover: {
            enable: true,
            mode: 'repulse',
          },
        },
      },
    }}
  />
);

ReactDOM.render(<ParticlesJs />, document.getElementById('root'));

Props

Particles rely on the following props:

Properties	Types	Default Value	Description
id	string	particles-js	Determines wheter to render Particles.
params	object	-----	Determines the configuration for Particles JS.
style	object	{}	Determines the styles for the Particles container.
width	string	auto	Determines the width for the Particles container.
height	string	100vh	Determines the height for the Particles container.
className	string	-----	Determines a custom className to apply to Particles container.
withDefaults	boolean	true	Determines if should merge values from params with lib defaults.

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

Contributing

If you want to contribute to this project see contributing for more information.

License

Distributed under the MIT license. See LICENSE for more information.