# react-animation-particles > A lightweight JavaScript library for creating particles Latest version **1.0.4** (published 2022-10-03) · MIT license · 0 weekly downloads ## Install ```sh npm install react-animation-particles pnpm add react-animation-particles yarn add react-animation-particles bun add react-animation-particles ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.4 | | Published | 2022-10-03 | | First published | 2022-09-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 88 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Igor Santos | | Maintainers | igorssc | | Keywords | react, canvas, particles, typescript, frontend | ## Links - npm: https://www.npmjs.com/package/react-animation-particles - Repository: https://github.com/igorssc/react-animation-particles - Homepage: https://react-animation-particles.vercel.app - Issues: https://github.com/igorssc/react-animation-particles/issues - npm.io page: https://npm.io/package/react-animation-particles ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.4 (latest) — 2022-10-03 - 1.0.3 — 2022-09-30 - 1.0.2 — 2022-09-30 - 1.0.1 — 2022-09-30 ## README ![animation](https://user-images.githubusercontent.com/26682297/192773634-09ee1b6d-329e-4f2c-b464-3f4b4f1acf6e.jpg) A lightweight JavaScript library for creating particles. ## ✨ Technologies This project was developed with the following technologies: - React - TypeScript ### 📃 `Library installation` #### npm ```bash npm install react-animation-particles ``` #### yarn ```bash yarn add react-animation-particles ``` #### pnpm ```bash pnpm install react-animation-particles ``` react-animation-particles aims to be a "plug and play" solution, without needing a lot of tinkering. In the ideal case, you can wrap the children you already have with , and get animation for free: **app.js** ```javascript import { Particles } from "react-animation-particles"; import config from "assets/particles.config"; export const Example = () => (

Hello World!

 ); ``` > By default, the particles have zIndex: 10, you must set the children with higher value ### 🪄 Demo / Generator Configure, export, and share your react-animation-particles configuration: ![Demo](https://user-images.githubusercontent.com/26682297/192793755-76c6a16b-eafe-4300-9c05-56df42021ef9.gif) Access **particles.config.json** ```javascript { particles: { number: { value: 60, density: { enable: true, value_area: 800, }, }, color: { value: "#199ada", }, shape: { type: "circle", stroke: { width: 0, color: "#000000", }, polygon: { nb_sides: 5, }, image: { src: "", width: 300, height: 300, }, }, opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false, }, }, size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false, }, }, line_linked: { enable: true, distance: 150, color: "#199ada", opacity: 0.3, width: 1, }, move: { enable: true, speed: 2, direction: "none", random: false, straight: false, out_mode: "out", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200, }, }, }, interactivity: { detect_on: "canvas", events: { onhover: { enable: false, mode: "grab", }, onclick: { enable: true, mode: "push", }, resize: true, }, modes: { grab: { distance: 400, line_linked: { opacity: 1, }, }, bubble: { distance: 30, size: 4, duration: 2, opacity: 0.8, speed: 3, }, repulse: { distance: 200, duration: 0.4, }, push: { particles_nb: 4, }, remove: { particles_nb: 2, }, }, }, retina_detect: false, } ``` You can control the start and end of the animation, just use the `load()` and `destroy()` functions ```javascript import { load } from "react-animation-particles"; /* load(@path-json (optional), @callback (optional)); */ load("assets/particles.json", function () { console.log("callback - particles.js config loaded"); }); ``` ```javascript import { destroy } from "react-animation-particles"; destroy(); ``` ### ⚓ `SSR` You can use the package with SSR frameworks, like nextJs, for that you just have to do a few steps: ```typescript // index.tsx import type { NextPage } from "next"; import { useEffect, useState } from "react"; import { BackgroundParticles } from "../Components/Particles"; const Content = () => { return ( <>

Hello, world!

); }; const Home: NextPage = () => { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { setIsLoaded(true); }, []); if (!isLoaded) { return ( <> ); } return ( ); }; export default Home; ``` ```typescript // Components/Particles.tsx import { ReactNode } from "react"; import { Particles } from "react-animation-particles"; export const BackgroundParticles = ({ children }: { children: ReactNode }) => { return ( <> {children} ); }; ``` ### `Options` | key | option type / notes | example | | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `particles.number.value` | number | `40` | | `particles.number.density.enable` | boolean | `true` / `false` | | `particles.number.density.value_area` | number | `800` | | `particles.color.value` | HEX (string)
RGB (object)
HSL (object)
array selection (HEX)
random (string) | `"#b61924"`
`{r:182, g:25, b:36}`
`{h:356, s:76, l:41}`
`["#b61924", "#333333"]`
`"random"` | | `particles.shape.type` | string
array selection | `"circle"`
`"edge"`
`"triangle"`
`"polygon"`
`"star"`
`"image"`
`["circle", "image"]` | | `particles.shape.stroke.width` | number | `2` | | `particles.shape.stroke.color` | HEX (string) | `"#222222"` | | `particles.shape.polygon.nb_slides` | number | `5` | | `particles.shape.image.src` | path link
svg / png / gif / jpg | `"assets/img/yop.svg"`
`"http://example.com/img.png"` | | `particles.shape.image.width` | number
(for aspect ratio) | `100` | | `particles.shape.image.height` | number
(for aspect ratio) | `100` | | `particles.opacity.value` | number (0 to 1) | `0.75` | | `particles.opacity.random` | boolean | `true` / `false` | | `particles.opacity.anim.enable` | boolean | `true` / `false` | | `particles.opacity.anim.speed` | number | `3` | | `particles.opacity.anim.opacity_min` | number (0 to 1) | `0.25` | | `particles.opacity.anim.sync` | boolean | `true` / `false` | | `particles.size.value` | number | `20` | | `particles.size.random` | boolean | `true` / `false` | | `particles.size.anim.enable` | boolean | `true` / `false` | | `particles.size.anim.speed` | number | `3` | | `particles.size.anim.size_min` | number | `0.25` | | `particles.size.anim.sync` | boolean | `true` / `false` | | `particles.line_linked.enable` | boolean | `true` / `false` | | `particles.line_linked.distance` | number | `150` | | `particles.line_linked.color` | HEX (string) | `#ffffff` | | `particles.line_linked.opacity` | number (0 to 1) | `0.5` | | `particles.line_linked.width` | number | `1.5` | | `particles.move.enable` | boolean | `true` / `false` | | `particles.move.speed` | number | `4` | | `particles.move.direction` | string | `"none"`
`"top"`
`"top-right"`
`"right"`
`"bottom-right"`
`"bottom"`
`"bottom-left"`
`"left"`
`"top-left"` | | `particles.move.random` | boolean | `true` / `false` | | `particles.move.straight` | boolean | `true` / `false` | | `particles.move.out_mode` | string
(out of canvas) | `"out"`
`"bounce"` | | `particles.move.bounce` | boolean
(between particles) | `true` / `false` | | `particles.move.attract.enable` | boolean | `true` / `false` | | `particles.move.attract.rotateX` | number | `3000` | | `particles.move.attract.rotateY` | number | `1500` | | `interactivity.detect_on` | string | `"canvas", "window"` | | `interactivity.events.onhover.enable` | boolean | `true` / `false` | | `interactivity.events.onhover.mode` | string
array selection | `"grab"`
`"bubble"`
`"repulse"`
`["grab", "bubble"]` | | `interactivity.events.onclick.enable` | boolean | `true` / `false` | | `interactivity.events.onclick.mode` | string
array selection | `"push"`
`"remove"`
`"bubble"`
`"repulse"`
`["push", "repulse"]` | | `interactivity.events.resize` | boolean | `true` / `false` | | `interactivity.events.modes.grab.distance` | number | `100` | | `interactivity.events.modes.grab.line_linked.opacity` | number (0 to 1) | `0.75` | | `interactivity.events.modes.bubble.distance` | number | `100` | | `interactivity.events.modes.bubble.size` | number | `40` | | `interactivity.events.modes.bubble.duration` | number
(second) | `0.4` | | `interactivity.events.modes.repulse.distance` | number | `200` | | `interactivity.events.modes.repulse.duration` | number
(second) | `1.2` | | `interactivity.events.modes.push.particles_nb` | number | `4` | | `interactivity.events.modes.push.particles_nb` | number | `4` | | `retina_detect` | boolean | `true` / `false` | ## 📝 Licence This project is under MIT licence. See the archive [LICENSE](LICENSE.md) to more details. --- Made with 💜 by [IGS Design](https://igsdesign.com.br) - Igor Santos 👋 --- _Source: https://npm.io/package/react-animation-particles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._