1.2.0 • Published 5 years ago
@blackbox-vision/react-particles v1.2.0
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-particlesYARN
yarn add @blackbox-vision/react-particlesUsage
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.