A basic confetti canvas that is missing basic styling to be added to the canvas.
The method for showing the confetti and ribbons was created by Hemn Chawroka on Codepen
This is a ReactJS component available through the npm registry.
Installation is done using the
npm install
command:
$ npm install react-confetti-canvas
To simply add the confetti canvas on to the page import it and include it into the container. The styling must be manually applied through your CSS environment, there is no styling added on to the page from the react-confetti-canvas
.
import React from 'react';
import ConfettiCanvas from 'react-confetti-canvas';
const App = () => {
return (
<ConfettiCanvas />
);
};
export default App;
To Change the colors of the ribbon and paper confetti falling down pass an array of arrays that represent the front and back hex color of a ribbon or paper.
const App = () => {
...
return (
<ConfettiCanvas
colors={[
['#F1948A', '#C39BD3'],
['#7FB3D5', '#76D7C4'],
['#F0B27A', '#7DCEA0']
]} />
);
...
};
The rate at which confetti pieces fall is determined by the duration. The duration stands for the amount of time that has passed in seconds in each frame. The higher the number the faster the confetti pieces fall, the lower the number the slower the confetti pieces fall.
const App = () => {
...
return (
<ConfettiCanvas
duration={0.001} />
);
...
};
How many paper pieces will fall at one time on the canvas.
const App = () => {
...
return (
<ConfettiCanvas
paperCount={100} />
);
...
};
How many ribbons will fall at one time on the canvas.
const App = () => {
...
return (
<ConfettiCanvas
ribbonCount={11} />
);
...
};
How many connected elements are inside of the ribbon, the higher the number the longer the ribbon will be.
const App = () => {
...
return (
<ConfettiCanvas
ribbonParticleCount={30} />
);
...
};
How far apart each particle is on the ribbon, the higher the number the farther apart the connected particles are.
const App = () => {
...
return (
<ConfettiCanvas
ribbonParticleDist={8.0} />
);
...
};
The thickness of the ribbon itself.
const App = () => {
...
return (
<ConfettiCanvas
ribbonParticleThick={8.0} />
);
...
};
The angle at which the ribbons twist to show the backside of the ribbon.
const App = () => {
...
return (
<ConfettiCanvas
ribbonParticleAngle={45} />
);
...
};
How much the ribbon will be affected by the drag produced by its fall. The higher the value the more it will be affected by drag, the lower the number the less it will be effected; The lower the number the faster it will fall.
const App = () => {
...
return (
<ConfettiCanvas
ribbonParticleMass={1} />
);
...
};
How much the ribbon will be effected by its mass as it falls. The lower the value the slower it falls and flutters.
const App = () => {
...
return (
<ConfettiCanvas
ribbonParticleDrag={0.05} />
);
...
};
The latest version will work with packages react
and react-dom
version ^16.0.0
.
If you are running react
and react-dom
version 15.0.0
you can use the v0.1.1
, it was tested with react
and react-dom
version 15.6.2
.
To install for react's 15.0.0
:
$ npm install [email protected]