basant307/AI_Governance_Project

1# @neoconfetti/react2 3Let's party 🎊🎊 with React! `@neoconfetti/react` allows you to show an awesome confetti explosion on your page, with React/Preact/Million!4 5## Features6 7- 🤏 Tiny - 1.61KB min+br.8- 🐇 Simple - Quite simple to use, and effectively no-config required!9- 🗃️ Customizable - Offers tons of options that you can modify to get different behaviors.10- 🖥️ SSR friendly - Works seamlessly in NextJS/Remix/Gatsby/Redwood and other Server Side Rendering environments!11 12<!-- TODO: Examples -->13<!-- [Try it in Svelte REPL](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24) -->14 15## Installing16 17```bash18# pnpm19pnpm add @neoconfetti/react20 21# bun22bun install @neoconfetti/react23 24# npm25npm install @neoconfetti/react26```27 28## Usage29 30Basic usage:31 32```tsx33import { Confetti } from '@neoconfetti/react';34 35<Confetti />;36```37 38Customizing behavior with options:39 40```tsx41<Confetti particleCount={200} force={0.3} />42```43 44## Props45 46There's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.47 48### particleCount49 50Number of confetti particles to create.51 52**type:** `number`53 54**Default value:** 15055 56**Example:**57 58```tsx59<Confetti particleCount={200} />60```61 62### particleSize63 64Size of the confetti particles in pixels65 66**type:** `number`67 68**Default value:** 1269 70**Example:**71 72```tsx73<Confetti particleSize={20} />74```75 76### particleShape77 78Shape of particles to use. Can be `mix`, `circles` or `rectangles`79 80`mix` will use both circles and rectangles81`circles` will use only circles82`rectangles` will use only rectangles83 84**type:** `'mix' | 'circles' | 'rectangles'`85 86**Default value:** `'mix'`87 88**Example:**89 90```tsx91<Confetti particleShape="circles" />92```93 94### duration95 96Duration of the animation in milliseconds97 98**type:** `number`99 100**Default value:** 3500101 102**Example:**103 104```tsx105<Confetti duration={5000} />106```107 108### colors109 110Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.111 112**type:** `Array<string>`113 114**Default value:** `['#FFC700', '#FF0000', '#2E3191', '#41BBC7']`115 116**Example:**117 118```tsx119<Confetti colors={['#FFC700', '#FF0000', '#2E3191', '#41BBC7']} />120```121 122### force123 124Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.125 126**type:** `number`127 128**Default value:** 0.5129 130**Example:**131 132```tsx133<Confetti force={0.3} />134```135 136### stageHeight137 138Height of the stage in pixels. Confetti will only fall within this height.139 140**type:** `number`141 142**Default value:** 800143 144**Example:**145 146```tsx147<Confetti stageHeight={500} />148```149 150### stageWidth151 152Width of the stage in pixels. Confetti will only fall within this width.153 154**type:** `number`155 156**Default value:** 1600157 158**Example:**159 160```tsx161<Confetti stageWidth={1000} />162```163 164### destroyAfterDone165 166Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.167 168**type:** `boolean`169 170**Default value:** `true`171 172**Example:**173 174```tsx175<Confetti destroyAfterDone={false} />176```177 178<!-- TODO -->179<!-- ## Examples -->180 181<!-- [Basic Example](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24?version=3.50.1)182 183[Confetti where mouse click](https://svelte.dev/repl/dbe0ab06c34f4f25aa6f948fdd1982c7?version=3.50.1) -->184 185## Fine-grained reactivity186 187Changing the options will destroy the existing confetti mid-flight, and create a new one with the new options. Exception: If `particlesCount` isn't changed, and properties like `colors` or `particleShape` is changed, the confetti particles will change their colors or shape mid-flight.188 189## Performance190 191This library functions by creating 2 DOM nodes for every single confetti. By default, if the `particlesCount` is set to 150, it will create 300 nodes. This is a lot of nodes. For most devices, these many nodes are not a big issue, but I recommend checking your target devices' performance if you choose to go with a higher number, like 400 or 500.192 193Also, after the specified `duration`, all the confetti DOM nodes will be destroyed. This is to free up memory. If you wish to keep them around, set `destroyAfterDone` to `false`.194 195## Credits196 197This library is the port of the amazing [react-confetti-explosion](https://www.npmjs.com/package//react-confetti-explosion) package, just **10X** smaller and faster. All the logic is from that package only, optimisation and Svelte code are mine 😉198 199## License200 201MIT License202© [Puru Vijay](https://twitter.com/puruvjdev)203