Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-canvas-confetti
Advanced tools
Readme
The React component for canvas-confetti library. In the demo version, you can play with the settings and see examples.
npm i react-canvas-confetti
:exclamation: It is expected that the react is already installed as peer dependency.
I recommend that you first familiarize yourself with the canvas-confetti library to better understand exactly how this module works.
There are two ways to use this module:
A preset is an animation template that is already ready to use. Presets allow you to customize animation settings, but do not allow you to change the animation algorithm. Using presets is an easier way to work with the module.
import Fireworks from "react-canvas-confetti/dist/presets/fireworks";
function Example() {
return <Fireworks autorun={{ speed: 3 }} />;
}
export default Example;
The preset working can be controlled manually using the Conductor instance
. This object allows you to start and stop animations on demand. Conductor can be accessed in the onInit
callback. The interface of the object is shown below:
type TRunAnimationParams = {
speed: number;
duration?: number;
delay?: number;
};
type TConductorInstance = {
run: (params: TRunAnimationParams) => void;
shoot: () => void;
pause: () => void;
stop: () => void;
};
Working with an instance is working with the module at a lower level. This is a more powerful approach that allows you to create your own animation algorithms, but requires more effort.
Confetti object, which will be received as a result of calling the function create. Gives you full control to create your own animations. Confetti can be accessed in the onInit
callback. The interface can be viewed here
The common settings are relevant for all use cases
Name | Type | Description |
---|---|---|
width | string | number | value is responsible for the width of the canvas. Alternative ways to control canvas sizes are className and style props. |
height | string | number | value is responsible for the height of the canvas. Alternative ways to control canvas sizes are className and style props. |
className | string | value to set className to canvas element |
style | CSSProperties | value to set style to canvas element. If style and className are not passed, the default styles will be set |
globalOptions | TGlobalOptions | global animation settings that cannot be changed after initialization (details) |
onInit | (params: {confetti: TCanvasConfettiInstance}) => void | the callback is called when the component is mounted on the page and allows you to access confetti instance (details) for manual animation creation |
Advanced settings only work for presets!
Name | Type | Description |
---|---|---|
autorun | { speed: number; duration?: number; delay?: number; } | if it is passed, it automatically starts the animation when mounting the component on the page |
decorateOptions | (options: TOptions) => TOptions | the callback allows you to customize the animation settings and is called for each step of the animation |
onInit | (params: { confetti: TCanvasConfettiInstance; conductor: TConductorInstance }) => void | the callback is called when the component is mounted on the page and allows you to access objects for manual creation and animation control |
FAQs
React component for canvas-confetti library
The npm package react-canvas-confetti receives a total of 60,097 weekly downloads. As such, react-canvas-confetti popularity was classified as popular.
We found that react-canvas-confetti demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.