npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fa7ad/react-confetti-explosion

v2.1.4-1

Published

A lightweight css-animation based confetti exploder for React

Downloads

4

Readme

React Confetti Explosion

npm version

This is a (potentially temporary) fork of react-confetti-explosion. The purpose of this fork is to deploy a demo site and migrate away from CRA+Rollup.

This is inspired by this beautiful and oft-used confetti which uses canvas, but equally inspired by how many bad looking CSS examples there are out there. The goal was to create a super lightweight confetti component that would not require canvas, use only CSS for animation, and could also be controlled as an explosion (rather than raining confetti), without the need to write a full-blown particle generator.

Install:

$ pnpm add @fa7ad/react-confetti-explosion

Usage

import ConfettiExplosion from '@fa7ad/react-confetti-explosion';

function App() {
  const [isExploding, setIsExploding] = React.useState(false);
  return <>{isExploding && <ConfettiExplosion />}</>;
}

Updates in v2.x

  • Remove dependency on @material-ui/styles in favor of react-jss
  • Update peer dependencies to react 18.x
  • Props floorWidth floorHeight -> width height
  • Export ConfettiProps type
  • Extend ConfettiProps with HTMLDivElement attributes (except ref)
  • Support number or string for height, defaulting to 120vh
  • Fix rotation in Safari (thanks to roydigerhund)
  • Use Portal for dom placement
  • Use create-react-app for dev and example app
  • Use rollup for package bundling (down to 31kb, woot!)

Optional Props

| Name | Type | Default | Description | | ------------- | ---------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | particleCount | number | 100 | Total number of particles used. Generally try to stay under 400 for optimal performance. | | particleSize | number | 12 | Size of particles in pixels. This means width for squares, diameter for circles. Note there is also a bit of randomness added to these. | | duration | number | 2200 | Duration of explosion in ms. This is the time it takes particles to travel from explosion point to the floor, as defined by height. | | onComplete | function | undefined | Function that is called at end of duration | | zIndex | number | undefined | zIndex that will be applied to the explosion, in case higher Portal stacking order is required. | | colors | string[] | ['#FFC700','#FF0000','#2E3191','#41BBC7'] | An array of any css-readable colors, which are evenly distributed across the number of total particles. | | force | number | 0.5 | Between 0-1, roughly the vertical force at which particles initially explode. Straying too far away from 0.5 may start looking...interesting. | | height | number string | '120vh' | Pixel distance the particles will vertically spread from initial explosion point. | | width | number | 1000 | Pixel distance the particles will horizontally spread from initial explosion point. |

Although the above properties of the explosion is controlled, mounting/unmounting is entirely left to the consumer.

Potential gotchas

  • The height is defaulted to 120vh in an attempt to guarantee particles land past the bottom of the viewport, which may not be ideal in some scenarios.
  • If using a string for relative height (vh or % for example), the relative height changes between mobile/desktop screens, which means different looking explosions.
  • If your height is too small, particles may visibly land on the floor instead of disappearing off-screen.
  • The ConfettiExplosion is appended to the document body via ReactDOM.createPortal() to ensure it is positioned correctly and layered above all page content. Make sure to remember to unmount it when your explosion is finished!

To keep the library as little as possible much of the physics have been estimated, cheapened, and downright mutilated. There are certainly prop combinations that will not look realistic, due to the limitations of CSS animations. But there should be enough options to fit most needs.

Examples

See src/example.tsx as an example app, bootstrapped with Create React App.

This can be run locally with yarn start.

Large explosion

{
  force: 0.8,
  duration: 3000,
  particleCount: 250,
  width: 1600,
}

confetti-large-edit

Medium explosion

{
  force: 0.6,
  duration: 2500,
  particleCount: 80,
  width: 1000,
}

confetti-small-edit

Small explosion

{
  force: 0.4,
  duration: 2200,
  particleCount: 30,
  width: 400,
}

confetti-tiny

Author

herrethan

License

MIT