daniel-lundin / react-dom-confetti Goto Github PK

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

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
}

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

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!

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

e.g.:

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

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

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.

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.

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.

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.

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!

Or perhaps set zIndex=2000 for the confetti div.

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

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.