Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wufe/react-particles-js
Particles.js for React
https://github.com/wufe/react-particles-js
particles react
Last synced: 30 days ago
JSON representation
Particles.js for React
- Host: GitHub
- URL: https://github.com/wufe/react-particles-js
- Owner: wufe
- License: mit
- Created: 2016-11-29T10:59:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T05:59:15.000Z (over 1 year ago)
- Last Synced: 2024-10-09T16:31:46.233Z (about 1 month ago)
- Topics: particles, react
- Language: TypeScript
- Homepage: https://rpj.bembi.dev/
- Size: 1.29 MB
- Stars: 1,154
- Watchers: 11
- Forks: 106
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
## Particles.js - React Component
---
## Warning: deprecation notice
Since this library is not actively maintained, it has been deprecated in favor of [react-tsparticles](https://www.npmjs.com/package/react-tsparticles) which shares the same core functionality of this library.
---
[![Particles][image]][hyperlink]
[hyperlink]: https://rpj.bembi.dev
[image]: https://raw.githubusercontent.com/wufe/react-particles-js/master/img/particles.png (Particles)
Particles React component, using [tsParticles](https://github.com/matteobruni/tsparticles).
Checkout the [demo page](https://rpj.bembi.dev).
---
## Installation
`npm install react-particles-js` || `yarn add react-particles-js`
## How to use
### Code
Example:
```javascript
import Particles from 'react-particles-js';
class App extends Component{
render(){
return (
);
};
}
```
### 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. |
| particlesRef | object | The instance of the [particles container](https://github.com/matteobruni/tsparticles/wiki/Particles-Container-class) |
Find your parameters configuration [here](https://particles.js.org).
---
### Added functionalities
#### Polygon mask support
Demo: [Polygon mask demo](https://rpj.bembi.dev/#mask).
Available only since version `v2.4.0` (available with `npm install [email protected]`).
##### 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](https://github.com/progers/pathseg)** is required.
Add it in your index.html:
```html
```
##### Example
```typescript
import Particles from 'react-particles-js';
class App extends Component{
render(){
return (
);
};
}
```
##### 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](https://rpj.bembi.dev/#images).
Available only since version `v2.4.0` (available with `npm install [email protected]`).
##### Example
```typescript
import Particles from 'react-particles-js';
class App extends Component{
render(){
return (
);
};
}
```
---
#### Line link shadow
Adds blurred shadow to the lines of the canvas.
```js
import Particles from 'react-particles-js';
class App extends Component{
render(){
return (
);
};
}
```
---
### 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 and Major changes
Starting with v3.0.0 the react-particles-js library has switched its core functionality using [tsParticles](https://github.com/matteobruni/tsparticles).
This may introduce breaking changes but will allow the library be maintained more frequently.
---
### 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](http://timeon.space).
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..