ulitcos / react-canvas-confetti Goto Github PK

Is there a function that received the canvas or its context as a parameter and allows to draw custom confetti particles?

Similar to https://github.com/alampros/react-confetti#drawshape= ?

If there's no function, could you please allow something like that? (I prefer using this lib)

Thanks in advance.

The performance is very bad on Firefox for android, It's rendering at about 25fps.
Running smoothly on Firefox for desktop, not sure what the proper fix would be.

There is an issue when building on Gatsby, mentioned here #catdad/canvas-confetti#78

It has been fixed in v1.3.3 and requires an update to the dependency.

Thanks!

Hello, I suddenly got this error when I run build. I use the ff:

"react-canvas-confetti": "^1.4.0",
"@types/canvas-confetti": "^1.6.0",

Type error: Type '(confetti: confetti.CreateTypes | null) => void' is not assignable to type '(confetti: import("/Users/francis/web/sample/node_modules/react-canvas-confetti/node_modules/@types/canvas-confetti/index").CreateTypes | null) => void'.

This is the component

import { CreateTypes } from 'canvas-confetti'
import { useCallback, useEffect, useRef } from 'react'
import ReactCanvasConfetti from 'react-canvas-confetti'

interface ConfettiProps {}

const Confetti: React.FC<ConfettiProps> = () => {
  const refAnimationInstance = useRef<CreateTypes | null>(null)

  const getInstance = useCallback((confetti: CreateTypes | null) => {
    refAnimationInstance.current = confetti
  }, [])

  const makeShot = useCallback((particleRatio: number, opts: any) => {
    refAnimationInstance.current &&
      refAnimationInstance.current({
        ...opts,
        origin: { y: 0.7 },
        particleCount: Math.floor(200 * particleRatio),
      })
  }, [])

  useEffect(() => {
    const fire = () => {
      makeShot(0.25, {
        spread: 26,
        startVelocity: 55,
      })

      makeShot(0.2, {
        spread: 60,
      })

      makeShot(0.35, {
        spread: 100,
        decay: 0.91,
        scalar: 0.8,
      })

      makeShot(0.1, {
        spread: 120,
        startVelocity: 25,
        decay: 0.92,
        scalar: 1.2,
      })

      makeShot(0.1, {
        spread: 120,
        startVelocity: 45,
      })
    }

    fire()
  }, [makeShot])

  return (
    <ReactCanvasConfetti
      refConfetti={getInstance}
      style={{
        position: 'fixed',
        pointerEvents: 'none',
        width: '100%',
        height: '100%',
        top: 0,
        left: 0,
      }}
    />
  )
}

export default Confetti

Hey there,

I love this package, but I noticed while trying to upgrade to v2 that this package does not publish any changelog. I'm wondering if this is something that could be achieved? It helps making upgrading between versions much easier.

I was able to figure this out by manually inspecting the examples but a migration guide would have sped things up a lot.

Appreciate your efforts on this project! Keep up the great work! 🙏

Hi @ulitcos!

Thanks for the project. Great work 😃

I've updated from 1.4.0 to 2.0.7 and found our confetti animation broken.

I didn't see any release notes to what happened from v1 to v2 to help debug the issue.

Is it possible to maintain release notes with new tags?

Also any hints what you think may have caused the issue would be of great help!

Thanks!

Hi, I'm trying to use your package and component like:
const canvasStyles = {
position: "fixed",
pointerEvents: "none",
width: "100%",
height: "100%",
top: 0,
left: 0,
};
<Pride autorun={{ speed: 30, duration:3000 }} style={canvasStyles} />

But compiler get's the error:

Type error: Type '{ position: string; pointerEvents: string; width: string; height: string; top: number; left: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
  Types of property 'pointerEvents' are incompatible.
    Type 'string' is not assignable to type 'PointerEvents | undefined'.

How can I fix it?

I recently tried out your Functional Component example of the Snow effect (ref) and saw that only the first colour in the array is accepted. I tried this in my solution first, but then went back to your CodeSandbox and saw this was also true there. If you try to add more colours to the array, only #ffffff is picked up.

Is this a known limitation?

Hi there, wonder is the react native support on the road map?

Just use the component in Nextjs and it will cause the TypeError right away.
Next 14.03
React 18.2
using client component, even with true client hack (setting state variable on useEffect mount).

Does this properly work with React 18?

I want to have multiple explosions at once.
For example, in Fireworks example, has 2 explosions, and other examples have 1 explosion at once.
Can we customize the number of explosions for each example?

• have multiple explosions at a time
• each explosion position would be randomized

I made an array of Date's and when someone opens the app on one of said dates I want the confetti to run for 5 seconds. I'm using the realistic confetti.

    componentDidMount() {
        const snapshots = [ 
...
]
        if (snapshots.includes(getTimestamp())) {
            this.startAnimation()
            setTimeout(this.pauseAnimation, 2000)
        }

My issue is that the animations works, but never stops. I've tried the code above and to set the timeout in pauseAnimation() directly but didn't work. Is there a workaround for this?

Can't use useEffect because it's a class component.

SOLVED

Made a countdown timer so that pauseAnimation runs after 5 seconds.

catdad/canvas-confetti#189
DefinitelyTyped/DefinitelyTyped#62880

Example error