2.2.2 • Published 6 years ago

@sheerun/react-particles-js v2.2.2

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

Particles.js - React Component

Particles

Implementation in Typescript + React of Particles.js by Vincent Garreau.


Installation

npm install react-particles-js || yarn add react-particles-js

How to use

Code

Example:

import Particles from 'react-particles-js';

class App extends Component{
  
    render(){
        return (
            <Particles />
        );
    };

}

Props

PropTypeDefinition
widthstringThe width of the canvas.
heightstringThe height of the canvas.
paramsobjectThe parameters of the particles instance.
styleobjectThe style of the canvas element.
classNamestringThe class name of the canvas wrapper.
canvasClassNamestringthe class name of the canvas.

Find your parameters configuration here.

Added functionalities

Shadow

Adds blurred shadow to the lines of the canvas.

import Particles from 'react-particles-js';

class App extends Component{
  
    render(){
        return (
            <Particles 
              params={{
            		particles: {
            			line_linked: {
            				shadow: {
            					enable: true,
            					color: "#3CA9D1",
            					blur: 5
            				}
            			}
            		}
            	}}
              style={{
                width: '100%',
                backgroundImage: `url(${logo})` 
              }}
            />
        );
    };

}

Reporting issues

  • Look for any related issues.
  • If you find an issue that seems related, please comment there instead of creating a new one.
  • If you find no related issue, create a new one.
  • Include all details you can ( operative system, environment, interpreter version, etc.. ).
  • Include the error log.
  • Remember to check the discussion and update if there changes.

Contributing

  • Fork the repository
  • Create your feature branch
  • Commit your changes and push the branch
  • Submit a pull request

Info

Refactoring stages

  • Add comprehensive props to the component.
  • Change params names.
  • Change variable and function names into more readable/understable/maintainable ones.
  • Update the structure of the code detaching defined functions from this.params.fn object.
  • Tests.