{"_id":"@candiesocean/rnconfetti","_rev":"3-dc69df2a1956060b65273c79c28759eb","name":"@candiesocean/rnconfetti","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@candiesocean/rnconfetti","version":"0.1.0","keywords":["react-native","expo","confetti","animation","react-native-ease","particles","celebration","cannon","burst","nano-icons"],"author":{"name":"candiesocean"},"license":"MIT","_id":"@candiesocean/rnconfetti@0.1.0","maintainers":[{"name":"candiesocean","email":"candiesoocean@gmail.com"}],"homepage":"https://github.com/candiesocean/rnconfetti#readme","bugs":{"url":"https://github.com/candiesocean/rnconfetti/issues"},"dist":{"shasum":"5ad2314e8045637a91b3df7fef1a110f222f2833","tarball":"https://registry.npmjs.org/@candiesocean/rnconfetti/-/rnconfetti-0.1.0.tgz","fileCount":23,"integrity":"sha512-/eK9drKMwQSkszuznO2wW73nNXXVUq4DQMmXjiVXLm/LMRa+xJL19oh2GMgNDe1BxuJyg0g+q+uS54apEVt66g==","signatures":[{"sig":"MEQCIEYCXbS4xz8BBgikWOQsc3+7tA3aRS+hVZBOz2T3KbTsAiAWlqCgbaAj1CTvA1t4RSuQJUumyGxrPLcnekKd0ZVB2w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65696},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dist":"tsup src/index.ts --format cjs,esm --dts","clean":"rm -rf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run dist"},"_npmUser":{"name":"candiesocean","email":"candiesoocean@gmail.com"},"repository":{"url":"git+https://github.com/candiesocean/rnconfetti.git","type":"git"},"_npmVersion":"11.6.2","description":"Gold confetti for React Native & Expo — physics-simulated polar spawn and gravity trajectories, animated with react-native-ease.","directories":{},"_nodeVersion":"24.13.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","typescript":"^5.0.0","@types/react":"^19.0.0","react-native":"^0.86.0","react-native-ease":"0.7.3","react-native-nano-icons":"^0.2.1"},"peerDependencies":{"expo":">=54.0.0","react":">=19.0.0","react-native":">=0.79.0","react-native-ease":">=0.7.0","react-native-nano-icons":">=0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/rnconfetti_0.1.0_1785416627417_0.9389462670717854","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@candiesocean/rnconfetti","version":"0.1.1","keywords":["react-native","expo","confetti","animation","react-native-ease","particles","celebration","cannon","burst","nano-icons"],"author":{"name":"candiesocean"},"license":"MIT","_id":"@candiesocean/rnconfetti@0.1.1","maintainers":[{"name":"candiesocean","email":"candiesoocean@gmail.com"}],"homepage":"https://github.com/candiesocean/rnconfetti#readme","bugs":{"url":"https://github.com/candiesocean/rnconfetti/issues"},"dist":{"shasum":"3f67a1311b24fee5b92fa10b329fc49976cbb813","tarball":"https://registry.npmjs.org/@candiesocean/rnconfetti/-/rnconfetti-0.1.1.tgz","fileCount":23,"integrity":"sha512-3qKmexMFe/qN/CGVYeSr9gJE78i7iXhAisOfIiwqBBDVf1XUjArPBTAUAKi6TmqHUFCOsGp2Q1338cM9O3PVlQ==","signatures":[{"sig":"MEUCIQD7mThl0QKWsGRG625DoSeuFOF1TshcU2z9t2tyRmsAvwIgdfyI1dkB4EOfH76yyi/KMl9bTBaRbxdGMksY2TUzROc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66176},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dist":"tsup src/index.ts --format cjs,esm --dts","clean":"rm -rf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run dist"},"_npmUser":{"name":"candiesocean","email":"candiesoocean@gmail.com"},"repository":{"url":"git+https://github.com/candiesocean/rnconfetti.git","type":"git"},"_npmVersion":"11.6.2","description":"Gold confetti for React Native & Expo — physics-simulated polar spawn and gravity trajectories, animated with react-native-ease.","directories":{},"_nodeVersion":"24.13.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","typescript":"^5.0.0","@types/react":"^19.0.0","react-native":"^0.86.0","react-native-ease":"0.7.3","react-native-nano-icons":"^0.2.1"},"peerDependencies":{"expo":">=54.0.0","react":">=19.0.0","react-native":">=0.79.0","react-native-ease":">=0.7.0","react-native-nano-icons":">=0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/rnconfetti_0.1.1_1785417020039_0.7001380916901461","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@candiesocean/rnconfetti","version":"0.2.0","description":"Confetti for React Native & Expo — physics-simulated polar spawn and gravity trajectories, animated with react-native-ease. Gold, purple and indigo presets.","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dist":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"npm run dist","typecheck":"tsc --noEmit","clean":"rm -rf dist"},"keywords":["react-native","expo","confetti","animation","react-native-ease","particles","celebration","cannon","burst","nano-icons","presets","theme"],"author":{"name":"candiesocean"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/candiesocean/rnconfetti.git"},"bugs":{"url":"https://github.com/candiesocean/rnconfetti/issues"},"homepage":"https://github.com/candiesocean/rnconfetti#readme","peerDependencies":{"expo":">=54.0.0","react":">=19.0.0","react-native":">=0.79.0","react-native-ease":">=0.7.0","react-native-nano-icons":">=0.2.0"},"devDependencies":{"@types/react":"^19.0.0","react":"^19.0.0","react-native":"^0.86.0","react-native-ease":"0.7.3","react-native-nano-icons":"^0.2.1","tsup":"^8.0.0","typescript":"^5.0.0"},"publishConfig":{"access":"public"},"_id":"@candiesocean/rnconfetti@0.2.0","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-oqd/qPsecCQu5BJ7jWwQnJRy+ORoE4C6+th80zFGUSkHsYqruSNh5fR64tlGgTdLASB6zSDY2hNV8bxc4O5ysA==","shasum":"c59d7c68bf62814dd4beb4bbf3f71e440d09256a","tarball":"https://registry.npmjs.org/@candiesocean/rnconfetti/-/rnconfetti-0.2.0.tgz","fileCount":23,"unpackedSize":77223,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID1rRaDcmetYSiI+9Xa0sM3uplNvBV3B9NzZE9jgcnscAiEAvYtaVRCvl0uOFZTyXvhZTr2+uWkOga+9uC/UW81V/gA="}]},"_npmUser":{"name":"candiesocean","email":"candiesoocean@gmail.com"},"directories":{},"maintainers":[{"name":"candiesocean","email":"candiesoocean@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rnconfetti_0.2.0_1785464416045_0.0702966639217828"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-30T13:03:45.658Z","modified":"2026-07-31T02:20:16.369Z","0.1.0":"2026-07-30T13:03:47.567Z","0.1.1":"2026-07-30T13:10:20.192Z","0.2.0":"2026-07-31T02:20:16.207Z"},"bugs":{"url":"https://github.com/candiesocean/rnconfetti/issues"},"author":{"name":"candiesocean"},"license":"MIT","homepage":"https://github.com/candiesocean/rnconfetti#readme","keywords":["react-native","expo","confetti","animation","react-native-ease","particles","celebration","cannon","burst","nano-icons","presets","theme"],"repository":{"type":"git","url":"git+https://github.com/candiesocean/rnconfetti.git"},"description":"Confetti for React Native & Expo — physics-simulated polar spawn and gravity trajectories, animated with react-native-ease. Gold, purple and indigo presets.","maintainers":[{"name":"candiesocean","email":"candiesoocean@gmail.com"}],"readme":"# @candiesocean/rnconfetti\n\nConfetti for React Native & Expo. Physics-simulated — each piece gets a polar\nspawn angle, a velocity, and a gravity + air-resistance trajectory solved ahead of\ntime, then animated through rise → fall → fade with\n[`react-native-ease`](https://github.com/software-mansion/react-native-ease).\n\nSprites are real multicolor glyphs (party popper, wrapped candy, lollipop, star,\nheart, gem, jelly bean, rect, dot) rendered from a native font via\n[`react-native-nano-icons`](https://github.com/software-mansion-labs/react-native-nano-icons) —\nnot `<View>` rectangles.\n\nThree color presets — `gold` (default), `purple`, `indigo` — plus a raw `colors`\narray if you want your own ramp. Presets are colors only; the physics never changes.\n\n## Install\n\n```sh\nnpm install @candiesocean/rnconfetti react-native-ease react-native-nano-icons\n```\n\n## Setup\n\nThe sprite font is generated at prebuild from the SVGs shipped inside this package,\nthen linked into your native app. Add the `react-native-nano-icons` config plugin to\n`app.json`, pointing at this package's `sprites/` folder:\n\n```json\n{\n  \"expo\": {\n    \"plugins\": [\n      [\n        \"react-native-nano-icons\",\n        {\n          \"iconSets\": [\n            {\n              \"inputDir\": \"./node_modules/@candiesocean/rnconfetti/sprites\",\n              \"fontFamily\": \"confetti-gold\"\n            }\n          ]\n        }\n      ]\n    ]\n  }\n}\n```\n\n`fontFamily` **must** be `confetti-gold` — it's the family the bundled glyphmap\nresolves against. Then:\n\n```sh\nnpx expo prebuild\nnpx expo run:ios   # or run:android\n```\n\nA native rebuild is required because the font is linked natively. This will not run\nin Expo Go. If you already have other nano-icons sets, add this one alongside them in\nthe same `iconSets` array.\n\n> Codepoints are assigned deterministically from the sorted SVG set starting at\n> `0xE900`, so the TTF the plugin generates matches the glyphmap shipped here.\n\nSetup is one-time and preset-independent. The font carries shapes, not colors — layer\ncolors are supplied at runtime — so `fontFamily` stays `confetti-gold` whichever\npreset you use, and switching presets needs no prebuild and no native rebuild.\n\n## Usage\n\nTwo pieces: a hook that owns the particle state, and an overlay that draws it.\n\n### Cannons — dual bottom corners firing inward\n\n```tsx\nimport { useEffect } from 'react';\nimport { useWindowDimensions, View } from 'react-native';\nimport { ConfettiOverlay, useConfetti } from '@candiesocean/rnconfetti';\n\nexport default function BookingConfirmed() {\n  const { width, height } = useWindowDimensions();\n  const { pieces, cannon, removePiece } = useConfetti();\n\n  useEffect(() => {\n    cannon({ stageWidth: width, stageHeight: height });\n  }, [cannon, width, height]);\n\n  return (\n    <View style={{ flex: 1 }}>\n      {/* your screen */}\n      <ConfettiOverlay pieces={pieces} onPieceDone={removePiece} />\n    </View>\n  );\n}\n```\n\n### Burst — radiating from one point\n\n```tsx\nconst { pieces, burst, removePiece } = useConfetti();\n\nburst({ originX: width / 2, originY: height / 3 });\n```\n\n`ConfettiOverlay` is `position: absolute`, fills its parent, and is\n`pointerEvents=\"box-none\"`, so it never blocks taps. Render it last inside a\npositioned parent.\n\n### Presets\n\n```tsx\n<ConfettiOverlay pieces={pieces} onPieceDone={removePiece} preset=\"indigo\" />\n```\n\n`gold` (default), `purple`, `indigo` — the names are in `CONFETTI_PRESETS`, the ramps\nin `CONFETTI_PRESET_COLORS`. For a custom ramp, pass `colors` instead; it overrides\n`preset`:\n\n```tsx\n<ConfettiOverlay pieces={pieces} onPieceDone={removePiece} colors={myRamp} />\n```\n\nA ramp is up to six colors ordered **deepest → highlight**, sized to the widest\nsprite (`party-popper`, 6 layers). Sprites with fewer layers use the leading entries,\nso order is load-bearing — a light color in slot 1 makes shadows read as highlights.\n\n## API\n\n### `useConfetti()`\n\n| Returns       | Type                                | Notes                                        |\n| ------------- | ----------------------------------- | -------------------------------------------- |\n| `pieces`      | `ConfettiPieceSpec[]`               | Live particles. Pass to `ConfettiOverlay`.   |\n| `cannon`      | `(opts: ConfettiCannonAt) => void`  | Dual bottom-corner cannons.                  |\n| `burst`       | `(opts: ConfettiBurstAt) => void`   | Single point burst.                          |\n| `removePiece` | `(id: string) => void`              | Pass as `onPieceDone`; retires a dead piece. |\n| `clear`       | `() => void`                        | Drop every live particle immediately.        |\n\n```ts\ntype ConfettiCannonAt = { stageWidth: number; stageHeight: number; count?: number };\ntype ConfettiBurstAt = { originX: number; originY: number; count?: number };\n```\n\n`count` defaults to `72` (`DEFAULT_PARTICLE_COUNT`). Concurrent particles are capped\nat 240 — spawning past that drops the oldest, so repeated firing can't grow unbounded.\n\n### `<ConfettiOverlay />`\n\n| Prop           | Type                        | Notes                                    |\n| -------------- | --------------------------- | ---------------------------------------- |\n| `pieces`       | `ConfettiPieceSpec[]`       |                                          |\n| `onPieceDone`  | `(id: string) => void`      |                                          |\n| `preset`       | `ConfettiPreset`            | `'gold'` (default) · `'purple'` · `'indigo'` |\n| `colors`       | `readonly string[]`         | Raw ramp, deepest → highlight. Wins over `preset`. |\n\n### Also exported\n\n`ConfettiParticle`, `ConfettiIcon`, `CONFETTI_FONT_FAMILY`, `CONFETTI_PRESETS`,\n`CONFETTI_PRESET_COLORS`, `CONFETTI_GOLD_COLORS`, `CONFETTI_PURPLE_COLORS`,\n`CONFETTI_INDIGO_COLORS`, `CONFETTI_SPRITES`, `CONFETTI_SPRITE_SIZES`,\n`createBurstSpecs`, `createCannonSpecs`, `DEFAULT_PARTICLE_COUNT` — plus the\n`ConfettiPreset` type, for driving the simulation yourself.\n\n## Peer dependencies\n\n`react` · `react-native` · `expo` · `react-native-ease` · `react-native-nano-icons`\n\n## License\n\nMIT © candiesocean\n","readmeFilename":"README.md"}