https://daniel-lundin.github.io/react-dom-confetti/

Trigger confetti explosions on state transitions
https://daniel-lundin.github.io/react-dom-confetti/

Last synced: 3 months ago
JSON representation

Trigger confetti explosions on state transitions

• Host: GitHub
• URL: https://daniel-lundin.github.io/react-dom-confetti/
• Owner: daniel-lundin
• Created: 2017-04-16T22:05:29.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T16:24:09.000Z (over 1 year ago)
• Last Synced: 2024-01-14T03:46:58.552Z (6 months ago)
• Language: JavaScript
• Size: 745 KB
• Stars: 620
• Watchers: 3
• Forks: 34
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Lists

• awesome-react-components - react-dom-confetti

README

        
# react-dom-confetti

[![npm version](https://badge.fury.io/js/react-dom-confetti.svg)](https://www.npmjs.com/package/react-dom-confetti)

Trigger confetti explosions on state transitions:

```js

import Confetti from 'react-dom-confetti';

// in render

```

This component will trigger a confetti explosion every time the prop `active` goes from a falsy to truthy value.

## Demo

[https://daniel-lundin.github.io/react-dom-confetti/](https://daniel-lundin.github.io/react-dom-confetti/)

## Why?

Slow operations annoy users and stakeholders. We have two options, either optimize slow operations or **make it worth the wait**. This library focuses on the latter.

### Props

#### active

Required. Triggers an explosion when the prop transitions from falsy to truthy.

#### config

Optional. Configuration object to control the characteristics of the confetti:

- `angle` - direction of the explosion in degrees, defaults to 90.

- `spread` - spread of the explosion in degrees, defaults to 45.

- `startVelocity` - Initial velocity of the particles, defaults to 45.

- `width`: - width of the confetti elements

- `height`: - height of the confetti elements

- `elementCount` - Number of particle elements, defaults to 50.

- `decay` - *deprecated* - Decrease in velocity per frame, defaults to 0.9 (Use of this will disable dragFriction)

- `dragFriction` - Decrease in velocity proportional to current velocity, default to 0.1

- `delay` - *deprecated* Use stagger instead.

- `stagger` - Delay for each fetti in milliseconds, defaults to 0.

- `random` - Randomization function, defaults to Math.random

- `colors` - An array of color codes, defaults to `['#a864fd', '#29cdff', '#78ff44', '#ff718d' '#fdff6a']`

License MIT, copyright [Daniel Lundin](https://www.twitter.com/daniel-lundin) 2017