Since this library is not actively maintained, it has been deprecated in favor of react-tsparticles which shares the same core functionality of this library.
Particles React component, using tsParticles.
Checkout the demo page.
npm install react-particles-js
|| yarn add react-particles-js
Example:
import Particles from 'react-particles-js';
class App extends Component{
render(){
return (
<Particles />
);
};
}
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. |
particlesRef | object | The instance of the particles container |
Find your parameters configuration here.
Demo: Polygon mask demo.
Available only since version v2.4.0
(available with npm install [email protected]
).
<script src="https://cdn.rawgit.com/progers/pathseg/master/pathseg.js"></script>
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'
}
}} />
);
};
}
polygon.enable
(boolean; default false) - Whether the mask must be enabledpolygon.url
(string) - The url of the svgpolygon.type
('inline' | 'inside' | 'outside'; default 'inline') - The particles should be drawn over, inside or outside the svg pathpolygon.scale
(number; default 1) - How much the svg must be scaledpolygon.move.radius
(number; default 10) - The radius which will be used as particles movement boundarypolygon.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 canvaspolygon.draw.stroke.width
(number; default .5) - Draw strokepolygon.draw.stroke.color
(string; default 'rgba(255, 255, 255, .1)') - Draw stroke colorLets you use multiple images as particle shape.
Demo: Multiple images demo.
Available only since version v2.4.0
(available with npm install [email protected]
).
import Particles from 'react-particles-js';
class App extends Component{
render(){
return (
<Particles
params={{
particles: {
shape: {
type: 'images',
image: [
{src: 'path/to/first/image.svg', height: 20, width: 20},
{src: 'path/to/second/image.jpg', height: 20, width: 20},
]
}
}
}} />
);
};
}
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})`
}}
/>
);
};
}
Starting with v3.0.0 the react-particles-js library has switched its core functionality using tsParticles. This may introduce breaking changes but will allow the library be maintained more frequently.
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..