{"id":20980530,"url":"https://github.com/hyperjumptech/react-native-confetti","last_synced_at":"2025-05-14T15:30:46.871Z","repository":{"id":38920165,"uuid":"237125678","full_name":"hyperjumptech/react-native-confetti","owner":"hyperjumptech","description":"React Native component to show confetti","archived":false,"fork":false,"pushed_at":"2023-08-09T17:18:21.000Z","size":49796,"stargazers_count":48,"open_issues_count":0,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-08T21:14:57.151Z","etag":null,"topics":["confetti","confetti-animation","firebase","indonesia","javascript","react","react-native","snow"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyperjumptech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-2.0.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-01-30T02:38:15.000Z","updated_at":"2025-04-17T19:01:30.000Z","dependencies_parsed_at":"2024-01-10T07:14:05.082Z","dependency_job_id":null,"html_url":"https://github.com/hyperjumptech/react-native-confetti","commit_stats":{"total_commits":28,"total_committers":8,"mean_commits":3.5,"dds":0.6785714285714286,"last_synced_commit":"85b170a83ea2585b8cb8e7005d287a24eb181a7d"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperjumptech%2Freact-native-confetti","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperjumptech%2Freact-native-confetti/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperjumptech%2Freact-native-confetti/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperjumptech%2Freact-native-confetti/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperjumptech","download_url":"https://codeload.github.com/hyperjumptech/react-native-confetti/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254171561,"owners_count":22026464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["confetti","confetti-animation","firebase","indonesia","javascript","react","react-native","snow"],"created_at":"2024-11-19T05:29:02.614Z","updated_at":"2025-05-14T15:30:41.860Z","avatar_url":"https://github.com/hyperjumptech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/hyperjumptech/react-native-confetti.svg?branch=master)](https://travis-ci.org/hyperjumptech/react-native-confetti)\r\n[![Build Status](https://dev.azure.com/hyperjumptech/react-native-confetti/_apis/build/status/hyperjumptech.react-native-confetti?branchName=master)](https://dev.azure.com/hyperjumptech/react-native-confetti/_build/latest?definitionId=1\u0026branchName=master)\r\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\r\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](./CONTRIBUTING.md)\r\n\r\n# Introduction\r\n\r\nReact native component to show [confetti](https://en.wikipedia.org/wiki/Confetti). It can be used as raining snow effect animation, with option to use unicode, emoji, or image as the flying pieces.\r\n\r\nThis is some example\r\n\r\n## snow effect\r\n\r\n\u003cimg src=\"https://github.com/hyperjumptech/react-native-confetti/blob/master/demo/snow-android.gif?raw=true\" width=\"320\" /\u003e\u003cimg src=\"https://github.com/hyperjumptech/react-native-confetti/blob/master/demo/snow-ios.gif?raw=true\" width=\"320\" /\u003e\r\n\r\n(the animation is not lagging. it's because you need to wait for the gif asset to load)\r\n\r\n## shake effect\r\n\r\n\u003cimg src=\"https://github.com/hyperjumptech/react-native-confetti/blob/master/demo/shake-android.gif?raw=true\" width=\"320\" /\u003e\u003cimg src=\"https://github.com/hyperjumptech/react-native-confetti/blob/master/demo/shake-ios.gif?raw=true\" width=\"320\" /\u003e\r\n\r\n(the animation is not lagging. it's because you need to wait for the gif asset to load)\r\n\r\n# Getting Started\r\n\r\n## Dependencies\r\n\r\nTo be able to dynamically enable confetti or to change the character, your react native app must:\r\n\r\n1. Install [react-native-firebase](https://rnfirebase.io/) (the Core module and Remote Config module)\r\n2. Set up your app to use Firebase\r\n3. Create 5 parameters with value of string in your project's remote config:\r\n\r\n   | parameter             | example value | description                                                                                                                                                                                                                                           |\r\n   | --------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n   | `confetti_enabled`    | 1             | set `1` to enable, set `0` to disable                                                                                                                                                                                                                 |\r\n   | `confetti_image_name` | snowflake     | if it has value, the flying piece of the Confetti will use this parameter instead of `confetti_character`. if you want to use character instead, set this parameter to empty string. Further explanation in using image will be given in next section |\r\n   | `confetti_character`  | ❅             | set this value with any character or unicode / emoji. eg: ❅, ❤️, 🏮. if parameter `confetti_image_name` is not empty string, this parameter is not being used                                                                                         |\r\n   | `confetti_type`       | shake         | set the value `shake` or `snow`. With `snow`, you just use vertical falling animation. With `shake` you get additional horizontal shake animation.                                                                                                    |\r\n   | `confetti_color`      | #6FC4C7       | hexadecimal value string                                                                                                                                                                                                                              |\r\n\r\n## Installation process\r\n\r\nUsing npm:\r\n\r\n```\r\nnpm i @hyperjumptech/react-native-confetti --save\r\n```\r\n\r\nor using yarn:\r\n\r\n```\r\nyarn add @hyperjumptech/react-native-confetti\r\n```\r\n\r\n## Usage\r\n\r\n### Minimal usage\r\n\r\nimport package\r\n\r\n```javascript\r\nimport {Confetti} from '@hyperjumptech/react-native-confetti';\r\n```\r\n\r\nthen put the component inside render\r\n\r\n```javascript\r\n\u003cConfetti isEnabled={true} color={'#6FC4C7'} character={'❅'} /\u003e\r\n```\r\n\r\n### With firebase remote config usage\r\n\r\nimport package\r\n\r\n```javascript\r\nimport {\r\n  Confetti,\r\n  fetchConfettiFromFirebase,\r\n} from '@hyperjumptech/react-native-confetti';\r\n```\r\n\r\ndefine state to hold the parameters\r\n\r\n```javascript\r\nstate = {\r\n  confetti: {\r\n    confetti_type: 'snow',\r\n    confetti_color: '',\r\n    confetti_character: '',\r\n    confetti_image_name: '',\r\n    confetti_enabled: false,\r\n  },\r\n};\r\n```\r\n\r\ndefine the parameters and call function to get data from firebase remote config\r\n\r\n```javascript\r\nconst keys = [\r\n  'confetti_type',\r\n  'confetti_color',\r\n  'confetti_character',\r\n  'confetti_enabled',\r\n  'confetti_image_name',\r\n];\r\n\r\nfetchConfetti(keys).then((data) =\u003e {\r\n  const confetti = {\r\n    confetti_type: data.confetti_type,\r\n    confetti_color: data.confetti_color,\r\n    confetti_character: data.confetti_character,\r\n    confetti_enabled: data.confetti_enabled === '1' ? true : false,\r\n    confetti_image_name: data.confetti_image_name,\r\n  };\r\n  this.setState({confetti});\r\n});\r\n```\r\n\r\nthen put component inside render\r\n\r\n```javascript\r\nconst {confetti} = this.state;\r\n\r\nreturn (\r\n  \u003cConfetti\r\n    isEnabled={confetti.confetti_enabled}\r\n    color={confetti.confetti_color}\r\n    character={confetti.confetti_character}\r\n    effect={confetti.confetti_type}\r\n  /\u003e\r\n);\r\n```\r\n\r\n### Usage with image instead of character\r\n\r\nIf you wish to use image, you can use image from predefined asset (not a dynamic url). So the step is same as above with additional step to define image path and size:\r\n\r\n```javascript\r\nconst images = {\r\n  snowflake: {\r\n    path: require('../../path_to_snowflake_image_asset.png'),\r\n    size: 24,\r\n  },\r\n  heart: {\r\n    path: require('../../path_to_heart_image_asset.jpeg'),\r\n    size: 24,\r\n  },\r\n};\r\n```\r\n\r\nthen add the `imageComponent` props\r\n\r\n```javascript\r\n\u003cConfetti\r\n  ...\r\n  imageComponent={\r\n  !!confetti.confetti_image_name ? (\r\n    \u003cImage\r\n      source={images[confetti.confetti_image_name].path}\r\n      style={{\r\n        width: images[confetti.confetti_image_name].size,\r\n        height: images[confetti.confetti_image_name].size,\r\n      }}\r\n    /\u003e\r\n  ) : (\r\n    undefined\r\n  )\r\n}\r\n/\u003e\r\n```\r\n\r\n## API references\r\n\r\nProps:\r\n\r\n| props          | type                    | required | description                                                                                                                                                                         |\r\n| -------------- | ----------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| isEnabled      | boolean                 | yes      | to enable or disable the confetti                                                                                                                                                   |\r\n| color          | string                  | yes      | define color of character. If you use emoji or image, the color will have no effect even if it has value                                                                            |\r\n| character      | string                  | no       | the flying pieces. default character is snowflake `❅`. you can use any unicode character or emoji. if there is `imageComponent` this props will have no effect even if it has value |\r\n| imageComponent | ReactNode               | no       | the flying pieces (will override `character` props) in form of react component for example: `Image`                                                                                 |\r\n| effect         | enum: [`snow`, `shake`] | yes      | `snow` to get only vertical falling animation , `shake` to get additional horizontal shaking animation                                                                              |\r\n\r\n# Build and Test\r\n\r\nTo build, run `npm run build` or `yarn build`\r\n\r\nTo test, run `npm run test` or `yarn test`\r\n\r\n# Demo\r\n\r\nTo see the running demo, you can run the example app with these steps:\r\n\r\n1. change directory to `example`\r\n\r\n```\r\ncd example\r\n```\r\n\r\n3. install packages\r\n\r\n```\r\nyarn\r\n```\r\n\r\nor\r\n\r\n```\r\nnpm install\r\n```\r\n\r\n4. run android\r\n\r\n```\r\nreact-native run-android\r\n```\r\n\r\nor run ios\r\n\r\n```\r\nreact-native run-ios\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperjumptech%2Freact-native-confetti","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperjumptech%2Freact-native-confetti","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperjumptech%2Freact-native-confetti/lists"}