daniel-lundin / react-dom-confetti

Trigger confetti explosions on state transitions

react-dom-confetti

Trigger confetti explosions on state transitions:

import Confetti from 'react-dom-confetti';

// in render
<Confetti active={ this.props.completed } />

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/

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 2017

react-dom-confetti's Issues

Please help me insert this into my WIX site

Can someone please help me convert this into an HTML element suitable for my WIX site?

I like these settings.....i just have no idea what else to add to it to make it work.

import Confetti from 'react-dom-confetti';

const config = {
angle: 51,
spread: 360,
startVelocity: 68,
elementCount: 200,
decay: 0.87
};
return <Confetti active={ someProp } config={ config }/>

****I have no idea what I need to add before and after this coding to make it compatible on my WIX site.

Please help me, someone.

I would also love this to be automatic when a certain page loads but I know that might be asking a bit much haha.

Thank you,

Kirsten

Async loading causes dom style property gets parsed by React

get

Uncaught (in promise) Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by MyConfetti.

when I load this up. React 15.6.1

SCRIPT5045: Assignment to read-only properties is not allowed in strict mode

Hi!
On Microsoft Edge, this is the error I'm getting ~1 second after clicking the button.
Confetti never comes. :(

TypeError exception happening seemingly on IE10+

I've been using react-dom-confetti for a while, and love it! However, Sentry has been warning me of a few exceptions that seem to be coming from the library itself. My only formulated thought is it is only happening on IE10+.

Here is the exception as reported by Sentry:

TypeError: Assignment to read-only properties is not allowed in strict mode
  at element (~/dom-confetti/lib/main.js:12)
  at n (~/dom-confetti/lib/main.js:10)
  at elements (~/dom-confetti/lib/main.js:98)
  at nextProps (~/react-dom-confetti/lib/confetti.js:42)
  at prevParentElement (~/react-dom/lib/ReactCompositeComponent.js:601)
...
(44 additional frame(s) were not displayed)

The exception is being reported by dom-confetti/lib/main. Any help debugging and/or fixing this would be greatly appreciated!

Update use of componentWillReceiveProps

When running this, I receive the following warning in the console:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Confetti

It would be fantastic if the Confetti component could be updated to be more in line with the current and future versions of React!

PS: As a quick fix to suppress the warning, you can simply replace all occurrences of componentWillReceiveProps in your code with UNSAFE_componentWillReceiveProps.

Don't send empty guess

v0.1.3 has wrong width and height types

The width and height props used to be strings (i.e. "20px"), which worked just fine ( besides, on https://daniel-lundin.github.io/react-dom-confetti/ the width and height props are still provided as strings ).
Since version 0.1.3., type definitions for height and width were added as numbers.
However, when I change "20px" to 20, the confetti no longer renders. Either the type definitions should be changed to either a number or string, or the confetti should still render when providing a number.

className is missing on typescript props type

Hi, thanks for your work on this package. I found a bug in the type stubs

Here you can see that the component allows passing className on its props, but that's not reflected on the type stubs. Also, that prop is missing on the repo README.

I can make a PR later this week if that's ok.

width and height not working (typescript)

The example shows width and height as string:
https://daniel-lundin.github.io/react-dom-confetti/

But node_modules/react-dom-confetti/index.d.ts shows:

interface ConfettiConfig {
    angle?: number;
    spread?: number;
    width?: number; //number not string
    height?: number; //number not string
    duration?: number;
    dragFriction?: number;
    stagger?: number;
    startVelocity?: number;
    elementCount?: number;
    decay?: number;
    colors?: string[];
    random?: () => number;
}

width and height as number or empty. It also doesn't work when I pass in:

const confettiConfig: ConfettiConfig = {
    angle,
    width: 20,
    height: 20
}

Render children, and spout confetti from center of children

e.g.:

<Confetti active={startedRecently} />
    <Button name="start"/>
</Confetti>

Add support for zIndex modification

Or perhaps set zIndex=2000 for the confetti div.

React 18.2.0. dependency update

This still works with React 18.2.0. It would be nice if you could update your devdependency's.

Lag in the Confetti explosion

I use this in an application of mine and we noticed quite a bit of lag in the confetti explosion. See the gif I attached:

I hope that you can resolve this issue.

Bump version of dom-confetti

With the recent changes to dom-confetti, I think you should bump the dependency of this project aswell.

Confetti on initial load

Hey,

I was able to get it to work upon a state change. Wondering if there is a way to make the confetti appear when a component loads initially without any state change. I tried setting the active attribute to true but that didn't work. Help will be appreciated!

Confetti shoots off the screen causes a vertical scroll bar for the duration - expected that it doesn't

In safari the position of the confetti is not the same and sometimes not working, any help ?

Config particle colors

dom-confetti sets the colors of the particles:
https://github.com/daniel-lundin/dom-confetti/blob/7c56b9ba4be7b7aae0766f5ccb58b58885bb0273/src/main.js#L1

Would be great if there was a way to control this in React.