react-confetti-canvas
v1.0.3
Published
Creates a canvas on the page with confetti fluttering inside of it
Downloads
758
Readme
react-confetti-canvas
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
Installation
This is a ReactJS component available through the npm registry.
Installation is done using the
npm install
command:
$ npm install react-confetti-canvas
How to Use
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;
Color
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']
]} />
);
...
};
Duration
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} />
);
...
};
Paper Count
How many paper pieces will fall at one time on the canvas.
const App = () => {
...
return (
<ConfettiCanvas
paperCount={100} />
);
...
};
Ribbon Count
How many ribbons will fall at one time on the canvas.
const App = () => {
...
return (
<ConfettiCanvas
ribbonCount={11} />
);
...
};
Ribbon Particle Count
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} />
);
...
};
Ribbon Particle Dist
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} />
);
...
};
Ribbon Particle Thick
The thickness of the ribbon itself.
const App = () => {
...
return (
<ConfettiCanvas
ribbonParticleThick={8.0} />
);
...
};
Ribbon Particle Angle
The angle at which the ribbons twist to show the backside of the ribbon.
const App = () => {
...
return (
<ConfettiCanvas
ribbonParticleAngle={45} />
);
...
};
Ribbon Particle Mass
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} />
);
...
};
Ribbon Particle Drag
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} />
);
...
};
Notes
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]