Skip to content
Particles.js for React
Branch: master
Clone or download
Latest commit dc90457 Mar 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
img
src Resolving merge conflict Mar 16, 2019
.gitignore Ignoring lib folder Mar 14, 2018
.npmignore
LICENSE.md Update LICENSE.md May 9, 2015
README.md
index.d.ts Bumped version Aug 29, 2018
package-lock.json 2.5.1 Mar 16, 2019
package.json
tsconfig.json Reverting to non-strict state Mar 16, 2019
webpack.config.js Reverting to non-strict state Mar 16, 2019

README.md

Particles.js - React Component

Particles

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

Checkout the demo page.


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

Prop Type Definition
width string The width of the canvas.
height string The height of the canvas.
params object The parameters of the particles instance.
style object The style of the canvas element.
className string The class name of the canvas wrapper.
canvasClassName string the class name of the canvas.

Find your parameters configuration here.


Added functionalities

Polygon mask support

Demo: Polygon mask demo.

Available only since version v2.4.0 (available with npm install react-particles-js@2.4.0).

Requirements
  • Only the first path of the svg will be fetched so you may want to join all path in your svg.
  • The SVGPathSeg polyfill is required.
    Add it in your index.html:
<script src="https://cdn.rawgit.com/progers/pathseg/master/pathseg.js"></script>
Example
import Particles from 'react-particles-js';

class App extends Component{
  
    render(){
        return (
            <Particles 
                params={{
                    polygon: {
                        enable: true,
                        type: 'inside',
                        move: {
                            radius: 10
                        },
                        url: 'path/to/svg.svg'
                    }
                }} />
        );
    };

}
Parameters
  • polygon.enable (boolean; default false) - Whether the mask must be enabled
  • polygon.url (string) - The url of the svg
  • polygon.type ('inline' | 'inside' | 'outside'; default 'inline') - The particles should be drawn over, inside or outside the svg path
  • polygon.scale (number; default 1) - How much the svg must be scaled
  • polygon.move.radius (number; default 10) - The radius which will be used as particles movement boundary
  • polygon.move.type ('path' | 'radius'; default 'path') - Whether the particles should be bounded to the polygon path or to a given radius, while moving with polygon.type = 'outside' or polygon.type = 'inside'
  • polygon.inline.arrangement ('random-point' | 'per-point' | 'one-per-point' | 'random-length' | 'equidistant'; default 'one-per-point') - Whether the particles disposition with polygon.type = 'inline' should be random or following some criteria; 'one-per-point' overrides the number of the particles drawn.
  • polygon.draw.enable (boolean; default false) - Whether the shape should be drawn on the canvas
  • polygon.draw.stroke.width (number; default .5) - Draw stroke
  • polygon.draw.stroke.color (string; default 'rgba(255, 255, 255, .1)') - Draw stroke color

Multiple images

Lets you use multiple images as particle shape.

Demo: Multiple images demo.

Available only since version v2.4.0 (available with npm install react-particles-js@2.4.0).

Example
import Particles from 'react-particles-js';

class App extends Component{
  
    render(){
        return (
            <Particles 
                params={{
                    particles: {
                        shape: {
                            type: 'images',
                            images: [
                                {src: 'path/to/first/image.svg', height: 20, width: 20},
                                {src: 'path/to/second/image.jpg', height: 20, width: 20},
                            ]
                        }
                    }
                }} />
        );
    };

}

Line link 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.

What's next

The main purpose of this library is to be simple to use, also allowing to be customized.

To accomplish this, an experimental branch has been created in order to provide a boilerplate for the next version of this library.

A live demonstration can be found here.

In this simple demo website, a new approach has been used, giving the application a powerful composability.
Issues concerning best practices, usability, backward compatibility and performances are raising, so..

Looking for contributors and mantainers

All is needed is previous experience with Typescript.

If you are interested contact me privately.

Every PR will always be welcome.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.