Skip to content
🎉Blazing fast ParticlesJS wrapper for ReactJS
Branch: master
Clone or download
JonatanSalas Merge pull request #1 from aoc/patch-1
fix: fix storybook config typo
Latest commit 17c7e98 Apr 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: initial commit Apr 18, 2019
.storybook
src feat: better config for storybook with ts Apr 19, 2019
stories feat: implement support for withDefaults property, and more stories Apr 19, 2019
.babelrc chore: initial commit Apr 18, 2019
.eslintrc.js chore: initial commit Apr 18, 2019
.gitignore feat: better config for storybook with ts Apr 19, 2019
.prettierrc.js
CONTRIBUTING.md chore: initial commit Apr 18, 2019
LICENSE chore: initial commit Apr 18, 2019
README.md chore: update docs Apr 19, 2019
commitlint.config.js chore: initial commit Apr 18, 2019
package-lock.json 1.2.0 Apr 19, 2019
package.json fix: react peer-dependency Apr 20, 2019
tsconfig.json feat: better config for storybook with ts Apr 19, 2019

README.md

React Particles JS npm version License: MIT Known Vulnerabilities

🎉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.

You can’t perform that action at this time.