— JavaScript — 1 min read
With my new course launching, I wanted to make a little quiz on the landing page. The quiz is short (4 questions), but they're non-trivial. It's a true/false format, so quick to complete.
When the user completes the quiz, they're shown their score, which they can then Tweet. The goal being to give a little delight to the user with some small gamification, and to draw folks in from Twitter (get that funnel going).
To add a lil extra pizazz, I wanted to add the ever ubiquitous confetti cannon. I use a confetti cannon for my own personal pomodoro/todo-list/whatever thing I built for myself - and I always enjoy it (I also use a marquee tag in that app :chefs_kiss:). In fact, I almost expect confetti it in certain situations these days.
To add a confetti cannon in a React (or literally any kind of app), it's fairly straight-forward. The library I went with with is react-dom-confetti and it's a breeze to setup (I normally stay away from calling things "simple", but this really is).
1yarn add react-dom-confetti
OR
1npm install react-dom-confetti
1import Confetti from "react-dom-confetti";
1// stole this from the example in the package's README2// play around with it as you wish3const confettiConfig = {4 angle: 90,5 spread: 360,6 startVelocity: 30,7 elementCount: 70,8 dragFriction: 0.12,9 duration: 3000,10 stagger: 3,11 width: "10px",12 height: "10px",13 perspective: "500px",14 // I had some CSS variables set for my color theme15 colors: [16 "var(--pink)",17 "var(--teal)",18 "var(--blue)",19 "var(--purple)",20 "var(--white)",21 ],22};
1const ConfettiButton = () => {2 const [showConfetti, setShowConfetti] = useState(false);3
4 return (5 <>6 <Confetti7 className="confetti-cannon"8 active={showConfetti}9 config={confettiConfig}10 />11 <button onClick={() => setShowConfetti(true)}>Click me!</button>12 </>13 );14};
Not everyone wants or responds well to all this motion. It can make some people feel physically sick, while some other folks just prefer not to experience all the animations developers are throwing into sites and apps. It's best to honor what your user wants/needs, they'll appreciate it!
To just plain disable the whole confetti cannon for users that prefer reduced motion, we can use a CSS media query that checks the user's operating system or browser. Read more over at MDN.
1@media (prefers-reduced-motion) {2 .confetti-cannon {3 display: none;4 }5}