{"_id":"@neoconfetti/react","_rev":"4185728","name":"@neoconfetti/react","description":"Confetti explosion in React 🎉🎊","dist-tags":{"latest":"1.0.0"},"maintainers":[{"name":"puruvj","email":""}],"time":{"modified":"2026-03-02T02:20:33.000Z","created":"2023-12-19T18:43:14.320Z","1.0.0":"2024-09-23T14:15:07.690Z","0.2.0":"2024-09-23T14:03:53.834Z","0.1.1":"2023-12-24T08:59:28.454Z","0.1.0":"2023-12-19T19:12:39.716Z","0.0.1":"2023-12-19T18:43:14.320Z"},"users":{},"author":{"name":"Puru Vijay"},"repository":{"type":"git","url":"git+https://github.com/puruvj/neoconfetti.git"},"versions":{"1.0.0":{"name":"@neoconfetti/react","version":"1.0.0","description":"Confetti explosion in React 🎉🎊","author":{"name":"Puru Vijay"},"license":"MIT","bugs":{"url":"https://github.com/puruvj/neoconfetti/issues"},"homepage":"https://github.com/puruvj/neoconfetti/tree/main/packages/react#readme","repository":{"type":"git","url":"git+https://github.com/puruvj/neoconfetti.git"},"keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","react","nextjs","remix"],"main":"./dist/index.js","module":"./dist/index.js","type":"module","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":{"production":"./dist/min/index.js","development":"./dist/index.js"},"default":"./dist/min/index.js"},"./package.json":"./package.json"},"devDependencies":{"@neoconfetti/core":"2.2.1"},"scripts":{"compile:watch":"tsup --watch","compile":"tsup","size":"echo 'React size:' && brotli-size dist/min/index.js","pub":"pnpm compile && pnpm publish --no-git-checks --access public","pub:dry":"pnpm compile && pnpm publish --dry-run --no-git-checks --access public"},"_id":"@neoconfetti/react@1.0.0","_integrity":"sha512-klcSooChXXOzIm+SE5IISIAn3bYzYfPjbX7D7HoqZL84oAfgREeSg5vSIaSFH+DaGzzvImTyWe1OyrJ67vik4A==","_resolved":"/tmp/c1e2c13d9e2fc454bac1681ee8f19d13/neoconfetti-react-1.0.0.tgz","_from":"file:neoconfetti-react-1.0.0.tgz","_nodeVersion":"18.20.4","_npmVersion":"10.7.0","dist":{"shasum":"9a619d980a2285a829b1f8c78ca6484f0364a370","size":7199,"noattachment":false,"key":"/@neoconfetti/react/-/@neoconfetti/react-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@neoconfetti/react/download/@neoconfetti/react-1.0.0.tgz"},"_npmUser":{"name":"puruvj","email":"awesomepuruvj@gmail.com"},"directories":{},"maintainers":[{"name":"puruvj","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_1.0.0_1727100907473_0.6278602270508815"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2024-09-23T14:15:07.690Z","publish_time":1727100907690,"_source_registry_name":"default","_cnpm_publish_time":1727100907690},"0.2.0":{"name":"@neoconfetti/react","version":"0.2.0","keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","react","nextjs","remix"],"author":{"name":"Puru Vijay"},"license":"MIT","_id":"@neoconfetti/react@0.2.0","maintainers":[{"name":"puruvj","email":""}],"homepage":"https://github.com/puruvj/neoconfetti/tree/main/packages/react#readme","bugs":{"url":"https://github.com/puruvj/neoconfetti/issues"},"dist":{"shasum":"90b95c182547368c2475831ebfb823bf63359247","size":7178,"noattachment":false,"key":"/@neoconfetti/react/-/@neoconfetti/react-0.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@neoconfetti/react/download/@neoconfetti/react-0.2.0.tgz"},"main":"./dist/index.js","type":"module","_from":"file:neoconfetti-react-0.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":{"production":"./dist/min/index.js","development":"./dist/index.js"},"default":"./dist/min/index.js"},"./package.json":"./package.json"},"scripts":{"pub":"pnpm compile && pnpm publish --no-git-checks --access public","size":"echo 'React size:' && brotli-size dist/min/index.js","compile":"tsup","pub:dry":"pnpm compile && pnpm publish --dry-run --no-git-checks --access public","compile:watch":"tsup --watch"},"_npmUser":{"name":"puruvj","email":"awesomepuruvj@gmail.com"},"_resolved":"/tmp/0ab0d369c6f90e1452f2a0cee900477b/neoconfetti-react-0.2.0.tgz","_integrity":"sha512-UEfuV1lx+TO68jM0moapUhZePpfTwsFTc+o5omZA2NCwrgLHlrJXZTBorujLJCuTA4GilObADz/oFu+QRdw+7w==","repository":{"url":"git+https://github.com/puruvj/neoconfetti.git","type":"git"},"_npmVersion":"10.7.0","description":"Confetti explosion in React 🎉🎊","directories":{},"sideEffects":false,"_nodeVersion":"18.20.4","_hasShrinkwrap":false,"devDependencies":{"@neoconfetti/core":"2.2.1"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.0_1727100233662_0.1673129114076941","host":"s3://npm-registry-packages"},"_cnpmcore_publish_time":"2024-09-23T14:03:53.834Z","publish_time":1727100233834,"_source_registry_name":"default","_cnpm_publish_time":1727100233834},"0.1.1":{"name":"@neoconfetti/react","version":"0.1.1","description":"Confetti explosion in React 🎉🎊","author":{"name":"Puru Vijay"},"license":"MIT","bugs":{"url":"https://github.com/puruvj/neoconfetti/issues"},"homepage":"https://github.com/puruvj/neoconfetti/tree/main/packages/react#readme","repository":{"type":"git","url":"git+https://github.com/puruvj/neoconfetti.git"},"keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","react","nextjs","remix"],"main":"./dist/index.js","module":"./dist/index.js","type":"module","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":{"production":"./dist/min/index.js","development":"./dist/index.js"},"default":"./dist/min/index.js"},"./package.json":"./package.json"},"devDependencies":{"@neoconfetti/core":"2.2.1"},"scripts":{"compile:watch":"tsup --watch","compile":"tsup","size":"echo 'React size:' && brotli-size dist/min/index.js","pub":"pnpm compile && pnpm publish --no-git-checks --access public","pub:dry":"pnpm compile && pnpm publish --dry-run --no-git-checks --access public"},"_id":"@neoconfetti/react@0.1.1","_integrity":"sha512-OqKn/QZYkrCaMBg/a1JTjG1Th0n7YPopIHctqgBi3C34bTV2wbrKJPCIDuNSltsaEpVWjQPbhLYwRpNUMnqhnQ==","_resolved":"/tmp/c63abda3499b6291a4022e298b52d30b/neoconfetti-react-0.1.1.tgz","_from":"file:neoconfetti-react-0.1.1.tgz","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"shasum":"c14374ab79affb957ad4dae6e01467b9b1838fd5","size":7179,"noattachment":false,"key":"/@neoconfetti/react/-/@neoconfetti/react-0.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@neoconfetti/react/download/@neoconfetti/react-0.1.1.tgz"},"_npmUser":{"name":"puruvj","email":"awesomepuruvj@gmail.com"},"directories":{},"maintainers":[{"name":"puruvj","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.1.1_1703408368241_0.30962834106637693"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-12-24T08:59:28.454Z","publish_time":1703408368454,"_source_registry_name":"default","_cnpm_publish_time":1703408368454},"0.1.0":{"name":"@neoconfetti/react","version":"0.1.0","description":"Confetti explosion in React 🎉🎊","author":{"name":"Puru Vijay"},"license":"MIT","bugs":{"url":"https://github.com/puruvj/neoconfetti/issues"},"homepage":"https://github.com/puruvj/neoconfetti/tree/main/packages/react#readme","repository":{"type":"git","url":"git+https://github.com/puruvj/neoconfetti.git"},"keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","react","nextjs","remix"],"main":"./dist/index.js","module":"./dist/index.js","type":"module","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":{"production":"./dist/min/index.js","development":"./dist/index.js"},"default":"./dist/min/index.js"},"./package.json":"./package.json"},"devDependencies":{"@neoconfetti/core":"2.2.0"},"scripts":{"compile:watch":"tsup --watch","compile":"tsup","size":"echo 'React size:' && brotli-size dist/min/index.js","pub":"pnpm compile && pnpm publish --no-git-checks --access public","pub:dry":"pnpm compile && pnpm publish --dry-run --no-git-checks --access public"},"_id":"@neoconfetti/react@0.1.0","_integrity":"sha512-AyHEA95gxvG3IPr0IUsUyPztJXTGszRD1PLu1vTTeqP+x2gif0/Dlkhi1g7LYSU6SPzor4chAWNeYwUiBVbNmA==","_resolved":"/tmp/0a579d53822f19ce4c3bc11598fa93a4/neoconfetti-react-0.1.0.tgz","_from":"file:neoconfetti-react-0.1.0.tgz","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"shasum":"9916cfe08928827b5a3d617d4c6245550dc12a21","size":7158,"noattachment":false,"key":"/@neoconfetti/react/-/@neoconfetti/react-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@neoconfetti/react/download/@neoconfetti/react-0.1.0.tgz"},"_npmUser":{"name":"puruvj","email":"awesomepuruvj@gmail.com"},"directories":{},"maintainers":[{"name":"puruvj","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.1.0_1703013159421_0.28571558503576266"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-12-19T19:12:39.716Z","publish_time":1703013159716,"_source_registry_name":"default","_cnpm_publish_time":1703013159716},"0.0.1":{"name":"@neoconfetti/react","version":"0.0.1","description":"Confetti explosion in React 🎉🎊","author":{"name":"Puru Vijay"},"license":"MIT","bugs":{"url":"https://github.com/puruvj/neoconfetti/issues"},"homepage":"https://github.com/puruvj/neoconfetti/tree/main/packages/react#readme","repository":{"type":"git","url":"git+https://github.com/puruvj/neoconfetti.git"},"keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","react","nextjs","remix"],"main":"./dist/index.js","module":"./dist/index.js","type":"module","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":{"production":"./dist/min/index.js","development":"./dist/index.js"},"default":"./dist/min/index.js"},"./package.json":"./package.json"},"devDependencies":{"@neoconfetti/core":"2.1.0"},"scripts":{"compile:watch":"tsup --watch","compile":"tsup","size":"echo 'React size:' && brotli-size dist/min/index.js","pub":"pnpm compile && pnpm publish --no-git-checks --access public","pub:dry":"pnpm compile && pnpm publish --dry-run --no-git-checks --access public"},"_id":"@neoconfetti/react@0.0.1","_integrity":"sha512-Tc2rLSVN0pUglYkLt05wMjAYQv9DIcprGvzChPx1gObRxnD89TqQVGcVgZDoyGVm56uYm5G5/TsfH8HTxxa68w==","_resolved":"/private/var/folders/w5/6zn2cp6x29lggw0f5c3jg8540000gn/T/6a7daa31c8c5601b3197605ffca74489/neoconfetti-react-0.0.1.tgz","_from":"file:neoconfetti-react-0.0.1.tgz","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"shasum":"e5e32f48328f6021a102a108b9ebbd7f0e6bf3e9","size":7158,"noattachment":false,"key":"/@neoconfetti/react/-/@neoconfetti/react-0.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@neoconfetti/react/download/@neoconfetti/react-0.0.1.tgz"},"_npmUser":{"name":"puruvj","email":"awesomepuruvj@gmail.com"},"directories":{},"maintainers":[{"name":"puruvj","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.1_1703011394029_0.39533642004068037"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-12-19T18:43:14.320Z","publish_time":1703011394320,"_source_registry_name":"default","_cnpm_publish_time":1703011394320}},"readme":"# @neoconfetti/react\n\nLet's party ???????? with React! `@neoconfetti/react` allows you to show an awesome confetti explosion on your page, with React/Preact/Million!\n\n## Features\n\n- ???? Tiny - 1.61KB min+br.\n- ???? Simple - Quite simple to use, and effectively no-config required!\n- ????️ Customizable - Offers tons of options that you can modify to get different behaviors.\n- ????️ SSR friendly - Works seamlessly in NextJS/Remix/Gatsby/Redwood and other Server Side Rendering environments!\n\n<!-- TODO: Examples -->\n<!-- [Try it in Svelte REPL](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24) -->\n\n## Installing\n\n```bash\n# pnpm\npnpm add @neoconfetti/react\n\n# bun\nbun install @neoconfetti/react\n\n# npm\nnpm install @neoconfetti/react\n```\n\n## Usage\n\nBasic usage:\n\n```tsx\nimport { Confetti } from '@neoconfetti/react';\n\n<Confetti />;\n```\n\nCustomizing behavior with options:\n\n```tsx\n<Confetti particleCount={200} force={0.3} />\n```\n\n## Props\n\nThere'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.\n\n### particleCount\n\nNumber of confetti particles to create.\n\n**type:** `number`\n\n**Default value:** 150\n\n**Example:**\n\n```tsx\n<Confetti particleCount={200} />\n```\n\n### particleSize\n\nSize of the confetti particles in pixels\n\n**type:** `number`\n\n**Default value:** 12\n\n**Example:**\n\n```tsx\n<Confetti particleSize={20} />\n```\n\n### particleShape\n\nShape of particles to use. Can be `mix`, `circles` or `rectangles`\n\n`mix` will use both circles and rectangles\n`circles` will use only circles\n`rectangles` will use only rectangles\n\n**type:** `'mix' | 'circles' | 'rectangles'`\n\n**Default value:** `'mix'`\n\n**Example:**\n\n```tsx\n<Confetti particleShape=\"circles\" />\n```\n\n### duration\n\nDuration of the animation in milliseconds\n\n**type:** `number`\n\n**Default value:** 3500\n\n**Example:**\n\n```tsx\n<Confetti duration={5000} />\n```\n\n### colors\n\nColors 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.\n\n**type:** `Array<string>`\n\n**Default value:** `['#FFC700', '#FF0000', '#2E3191', '#41BBC7']`\n\n**Example:**\n\n```tsx\n<Confetti colors={['#FFC700', '#FF0000', '#2E3191', '#41BBC7']} />\n```\n\n### force\n\nForce 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.\n\n**type:** `number`\n\n**Default value:** 0.5\n\n**Example:**\n\n```tsx\n<Confetti force={0.3} />\n```\n\n### stageHeight\n\nHeight of the stage in pixels. Confetti will only fall within this height.\n\n**type:** `number`\n\n**Default value:** 800\n\n**Example:**\n\n```tsx\n<Confetti stageHeight={500} />\n```\n\n### stageWidth\n\nWidth of the stage in pixels. Confetti will only fall within this width.\n\n**type:** `number`\n\n**Default value:** 1600\n\n**Example:**\n\n```tsx\n<Confetti stageWidth={1000} />\n```\n\n### destroyAfterDone\n\nWhether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.\n\n**type:** `boolean`\n\n**Default value:** `true`\n\n**Example:**\n\n```tsx\n<Confetti destroyAfterDone={false} />\n```\n\n<!-- TODO -->\n<!-- ## Examples -->\n\n<!-- [Basic Example](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24?version=3.50.1)\n\n[Confetti where mouse click](https://svelte.dev/repl/dbe0ab06c34f4f25aa6f948fdd1982c7?version=3.50.1) -->\n\n## Fine-grained reactivity\n\nChanging 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.\n\n## Performance\n\nThis 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.\n\nAlso, 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`.\n\n## Credits\n\nThis 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 ????\n\n## License\n\nMIT License\n© [Puru Vijay](https://twitter.com/puruvjdev)\n","_attachments":{},"homepage":"https://github.com/puruvj/neoconfetti/tree/main/packages/react#readme","bugs":{"url":"https://github.com/puruvj/neoconfetti/issues"},"license":"MIT"}