React component to draw confetti for your party.
npm install confetti-reactThis is a fork of react-confetti which was created when that library was unsupported and the latest release was completely broken. It is my understanding that the original library is once again actively maintained. This fork has cleaner builds, but is not as active.
For live examples and demo's of this code, you can reference the react-confetti live documentation.
Confetti without the cleanup.
!npm type definitions
Based on a pen by @Gthibaud: https://codepen.io/Gthibaud/pen/ENzXbp
[![demogif][2]][1]
[1]: http://rkuykendall.github.com/confetti-react
[2]: https://user-images.githubusercontent.com/796717/113315634-7d24f800-92db-11eb-9a01-4c83413a5756.png 'demo gif'
``sh`
npm install confetti-react
width and height props are recommended. They will default to the initial window dimensions, but will not respond to
resize events. It is recommended to provide the dimensions yourself. Here is an example using
a hook:
`jsx
import React from 'react';
import useWindowSize from 'react-use/lib/useWindowSize';
import Confetti from 'confetti-react';
export default () => {
const { width, height } = useWindowSize();
return
};
`
| Property | Type | Default | Description |
| -------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| width | Number | window.innerWidth \|\| 300 | Width of the
Draw a custom shape for a particle. If not provided, defaults to a random selection of a square, circle or strip
confetto. The function is called with the canvas context as a parameter and the Particle as the
this context.
For example, to draw all spirals:
`jsx``
ctx.beginPath();
for (let i = 0; i < 22; i++) {
const angle = 0.35 * i;
const x = (0.2 + 1.5 angle) Math.cos(angle);
const y = (0.2 + 1.5 angle) Math.sin(angle);
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.closePath();
}}
/>