{"id":13632541,"url":"https://github.com/wufe/react-particles-js","last_synced_at":"2025-05-15T01:09:48.355Z","repository":{"id":41826737,"uuid":"75072759","full_name":"wufe/react-particles-js","owner":"wufe","description":"Particles.js for React","archived":false,"fork":false,"pushed_at":"2023-03-04T05:59:15.000Z","size":1348,"stargazers_count":1153,"open_issues_count":12,"forks_count":105,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-10T01:03:08.058Z","etag":null,"topics":["particles","react"],"latest_commit_sha":null,"homepage":"https://rpj.bembi.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wufe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-29T10:59:11.000Z","updated_at":"2025-05-07T09:04:35.000Z","dependencies_parsed_at":"2024-01-08T21:02:23.694Z","dependency_job_id":"1a20ff15-3d22-46da-b00b-d25fe9d7f244","html_url":"https://github.com/wufe/react-particles-js","commit_stats":{"total_commits":439,"total_committers":32,"mean_commits":13.71875,"dds":0.5740318906605922,"last_synced_commit":"85964f6762ae54976cef6aca09b764008c4a8079"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wufe%2Freact-particles-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wufe%2Freact-particles-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wufe%2Freact-particles-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wufe%2Freact-particles-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wufe","download_url":"https://codeload.github.com/wufe/react-particles-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254043,"owners_count":22039792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["particles","react"],"created_at":"2024-08-01T22:03:06.344Z","updated_at":"2025-05-15T01:09:43.323Z","avatar_url":"https://github.com/wufe.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"## Particles.js - React Component\n\n---\n\n## Warning: deprecation notice\n\nSince 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.  \n\n---\n\n\n[![Particles][image]][hyperlink]\n\n  [hyperlink]: https://rpj.bembi.dev\n  [image]: https://raw.githubusercontent.com/wufe/react-particles-js/master/img/particles.png (Particles)\n\nParticles React component, using [tsParticles](https://github.com/matteobruni/tsparticles).\n\nCheckout the [demo page](https://rpj.bembi.dev).\n\n---\n\n## Installation\n\n`npm install react-particles-js` || `yarn add react-particles-js`\n\n## How to use\n\n### Code\n\nExample:\n\n```javascript\nimport Particles from 'react-particles-js';\n\nclass App extends Component{\n  \n    render(){\n        return (\n            \u003cParticles /\u003e\n        );\n    };\n\n}\n\n```\n\n### Props\n\n| Prop | Type | Definition |\n| --- | --- | --- |\n| width | string | The width of the canvas. |\n| height | string | The height of the canvas. |\n| params | object | The parameters of the particles instance. |\n| style | object | The style of the canvas element. |\n| className | string | The class name of the canvas wrapper. |\n| canvasClassName | string | the class name of the canvas. |\n| particlesRef | object | The instance of the [particles container](https://github.com/matteobruni/tsparticles/wiki/Particles-Container-class) |\n\nFind your parameters configuration [here](https://particles.js.org).\n\n---\n\n### Added functionalities\n\n#### Polygon mask support\n\nDemo: [Polygon mask demo](https://rpj.bembi.dev/#mask).\n\nAvailable only since version `v2.4.0` (available with `npm install react-particles-js@2.4.0`).\n\n##### Requirements\n\n+ Only the first path of the svg will be fetched so you may want to join all path in your svg.\n+ The **[SVGPathSeg polyfill](https://github.com/progers/pathseg)** is required.  \nAdd it in your index.html:\n\n```html\n\u003cscript src=\"https://cdn.rawgit.com/progers/pathseg/master/pathseg.js\"\u003e\u003c/script\u003e\n```\n\n##### Example\n```typescript\nimport Particles from 'react-particles-js';\n\nclass App extends Component{\n  \n    render(){\n        return (\n            \u003cParticles \n                params={{\n                    polygon: {\n                        enable: true,\n                        type: 'inside',\n                        move: {\n                            radius: 10\n                        },\n                        url: 'path/to/svg.svg'\n                    }\n                }} /\u003e\n        );\n    };\n\n}\n```\n\n##### Parameters\n\n+ `polygon.enable` (boolean; default false) - Whether the mask must be enabled\n+ `polygon.url` (string) - The url of the svg  \n+ `polygon.type` ('inline' | 'inside' | 'outside'; default 'inline') - The particles should be drawn over, inside or outside the svg path  \n+ `polygon.scale` (number; default 1) - How much the svg must be scaled  \n+ `polygon.move.radius` (number; default 10) - The radius which will be used as particles movement boundary  \n+ `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'` \n+ `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.  \n+ `polygon.draw.enable` (boolean; default false) - Whether the shape should be drawn on the canvas  \n+ `polygon.draw.stroke.width` (number; default .5) - Draw stroke  \n+ `polygon.draw.stroke.color` (string; default 'rgba(255, 255, 255, .1)') - Draw stroke color  \n\n---\n\n#### Multiple images\n\nLets you use multiple images as particle shape.  \n\nDemo: [Multiple images demo](https://rpj.bembi.dev/#images).\n\nAvailable only since version `v2.4.0` (available with `npm install react-particles-js@2.4.0`).\n\n##### Example\n\n```typescript\nimport Particles from 'react-particles-js';\n\nclass App extends Component{\n  \n    render(){\n        return (\n            \u003cParticles \n                params={{\n                    particles: {\n                        shape: {\n                            type: 'images',\n                            image: [\n                                {src: 'path/to/first/image.svg', height: 20, width: 20},\n                                {src: 'path/to/second/image.jpg', height: 20, width: 20},\n                            ]\n                        }\n                    }\n                }} /\u003e\n        );\n    };\n\n}\n```\n\n---\n\n#### Line link shadow\n\nAdds blurred shadow to the lines of the canvas.\n\n```js\nimport Particles from 'react-particles-js';\n\nclass App extends Component{\n  \n    render(){\n        return (\n            \u003cParticles \n              params={{\n            \t\tparticles: {\n            \t\t\tline_linked: {\n            \t\t\t\tshadow: {\n            \t\t\t\t\tenable: true,\n            \t\t\t\t\tcolor: \"#3CA9D1\",\n            \t\t\t\t\tblur: 5\n            \t\t\t\t}\n            \t\t\t}\n            \t\t}\n            \t}}\n              style={{\n                width: '100%',\n                backgroundImage: `url(${logo})` \n              }}\n            /\u003e\n        );\n    };\n\n}\n```\n\n---\n\n### Reporting issues\n\n+ Look for any related issues.  \n+ If you find an issue that seems related, please comment there instead of creating a new one.  \n+ If you find no related issue, create a new one.  \n+ Include all details you can ( operative system, environment, interpreter version, etc.. ).  \n+ Include the error log.  \n+ Remember to check the discussion and update if there changes.  \n\n### Contributing  \n\n+ Fork the repository  \n+ Create your feature branch  \n+ Commit your changes and push the branch  \n+ Submit a pull request\n\n---\n\n## Info and Major changes\n\nStarting with v3.0.0 the react-particles-js library has switched its core functionality using [tsParticles](https://github.com/matteobruni/tsparticles).\nThis may introduce breaking changes but will allow the library be maintained more frequently.\n\n---\n\n### What's next\n\nThe main purpose of this library is to be simple to use, also allowing to be customized.\n\nTo accomplish this, an experimental branch has been created in order to provide a boilerplate for the next version of this library.\n\nA live demonstration can be found [here](http://timeon.space).\n\nIn this simple demo website, a new approach has been used, giving the application a powerful composability.  \nIssues concerning best practices, usability, backward compatibility and performances are raising, so..\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwufe%2Freact-particles-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwufe%2Freact-particles-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwufe%2Freact-particles-js/lists"}