A react component to show a neat css animated confetti effect I've used around 50 times over the last 10 years. Componentized for easy use, variablility and a few extra bells and whistles.
See it in action.
Credit where credit is due, after a lot of digging I believe this is the original? Although perhaps it too had some prior art.
Add to your project via npm or yarn
npm install @tholman/confetti --saveyarn add @tholman/confettiImport in your react component, and apply generously.
import Confetti from '@tholman/confetti';<Confetti total={99} />You can also pass in an array of components to create a more controlled effect. There are a couple of base shapes provided.
import Confetti, { Rectangle, Circle, Triangle } from '@tholman/confetti';<Confetti total={99} Component={[
<Rectangle color="red" />,
<Circle color="blue" />,
<Triangle color="green" />,
]} />The containter itself is absolutely positioned, and will try to expand into the space you give it, but you can also control its css as you would any element.
<Confetti total={99} className="custom-class" />The library provides you with a couple of base confetti shapes, but you can also pass in your own components for more variety.
<Confetti total={99} Component={<YourComponent />} />ISC