VincentCATILLON / React Native Confetti Cannon
Licence: mit
React Native confetti explosion and fall like iOS does.
Stars: ✭ 149
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
flow
126 projects
flowtype
47 projects
Projects that are alternatives of or similar to React Native Confetti Cannon
Particles.js
A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
Stars: ✭ 1,336 (+796.64%)
Mutual labels: particles, animated
React Native Web Modal
React Native Modal Implementation for Web
Stars: ✭ 114 (-23.49%)
Mutual labels: animated, react-native-web
Expo Dark Mode Switch
A beautiful React dark mode switch component for iOS, Android, and Web
Stars: ✭ 137 (-8.05%)
Mutual labels: animated, react-native-web
Windows Auto Night Mode
Automatically switches between the dark and light theme of Windows 10 and Windows 11
Stars: ✭ 3,375 (+2165.1%)
Mutual labels: lightweight
Unity resources
A list of resources and tutorials for those doing programming in Unity.
Stars: ✭ 170 (+14.09%)
Mutual labels: particles
Smtpd
A Lightweight High Performance ESMTP email server
Stars: ✭ 175 (+17.45%)
Mutual labels: lightweight
Svgs
svgs is a compatiblity layer between svg and react-native-svg
Stars: ✭ 182 (+22.15%)
Mutual labels: react-native-web
Bootstrap Cookie Alert
A simple, good looking cookie alert built for Bootstrap 3/4. No dependencies required.
Stars: ✭ 165 (+10.74%)
Mutual labels: lightweight
Konfetti
Celebrate more with this lightweight confetti particle system 🎊
Stars: ✭ 2,278 (+1428.86%)
Mutual labels: particles
React Native Paper Dates
Smooth and fast cross platform Material Design date and time picker for React Native Paper
Stars: ✭ 173 (+16.11%)
Mutual labels: react-native-web
Loglevel
📒 Minimal lightweight logging for JavaScript, adding reliable log level methods to wrap any available console.log methods
Stars: ✭ 2,133 (+1331.54%)
Mutual labels: lightweight
Unity Bullet Hell
An extremely efficient projectile generator for unity.
Stars: ✭ 168 (+12.75%)
Mutual labels: particles
Komorebi
A beautiful and customizable wallpapers manager for Linux
Stars: ✭ 2,472 (+1559.06%)
Mutual labels: animated
Redux Zero
A lightweight state container based on Redux
Stars: ✭ 1,977 (+1226.85%)
Mutual labels: lightweight
Reactnativeuniversal
A demonstration of sharing javascript react-native code between mobile, desktop and web environments
Stars: ✭ 178 (+19.46%)
Mutual labels: react-native-web
Nachos Ui
Nachos UI is a React Native component library.
Stars: ✭ 2,037 (+1267.11%)
Mutual labels: react-native-web
Ioc
🦄 lightweight (<1kb) inversion of control javascript library for dependency injection written in typescript
Stars: ✭ 171 (+14.77%)
Mutual labels: lightweight
Fero
light, fast, scalable, streaming microservices made easy
Stars: ✭ 175 (+17.45%)
Mutual labels: lightweight
Live demo
🚀 Try yourself on Storybook web version
Installation
npm install react-native-confetti-cannon
# or
yarn add react-native-confetti-cannon
Usage
import ConfettiCannon from 'react-native-confetti-cannon';
const MyComponent = () => (
<ConfettiCannon count={200} origin={{x: -10, y: 0}} />
);
Props
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| count | number | items count to display | required | |
| origin | {x: number, y: number} | animation position origin | required | |
| explosionSpeed | number | explosion duration (ms) from origin to top | 350 | |
| fallSpeed | number | fall duration (ms) from top to bottom | 3000 | |
| fadeOut | boolean | make the confettis disappear at the end | false | |
| colors | string[] | give your own colors to the confettis | default colors | |
| autoStart | boolean | auto start the animation | true | |
| autoStartDelay | number | delay to wait before triggering animation | 0 |
Events
| Name | Returns | Description | Required |
|---|---|---|---|
| onAnimationStart | void | callback triggered at animation start | |
| onAnimationResume | void | callback triggered at animation resume | |
| onAnimationStop | void | callback triggered at animation stop | |
| onAnimationEnd | void | callback triggered at animation end |
Methods
| Name | Returns | Description | Required |
|---|---|---|---|
| start | void | start the animation programmatically | |
| resume | void | resume the animation programmatically | |
| stop | void | stop the animation programmatically |
For example:
import ConfettiCannon from 'react-native-confetti-cannon';
class MyComponent extends React.PureComponent {
explosion;
handleSomeKindOfEvent = () => {
this.explosion && this.explosion.start();
};
render() {
return (
<ConfettiCannon
count={200}
origin={{x: -10, y: 0}}
autoStart={false}
ref={ref => (this.explosion = ref)}
/>
);
}
}
Examples
Deep into the example folder to see the stories and run:
npm install && npm start
And choose one of the following Expo commands:
-
i: open in iOS simulator -
a: open in Android emulator -
w: open in web browser
⚠️ Warning
It is strongly recommended to use 1.2.0 or higher to avoid this warning introduced in React-Native 0.62:
Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].