{"id":13433175,"url":"https://github.com/thedevelobear/react-rewards","last_synced_at":"2025-04-25T14:49:18.869Z","repository":{"id":33284695,"uuid":"157291522","full_name":"thedevelobear/react-rewards","owner":"thedevelobear","description":"A package containing a few micro-interactions you can use to reward your users for little things and make them smile!","archived":false,"fork":false,"pushed_at":"2025-01-30T18:11:56.000Z","size":5406,"stargazers_count":1635,"open_issues_count":3,"forks_count":62,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-19T10:03:06.803Z","etag":null,"topics":["balloons","confetti","emoji","front-end","micro-interactions","react","react-components","reactjs","rewards","user-experience","ux"],"latest_commit_sha":null,"homepage":"https://github.com/thedevelobear/react-rewards","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thedevelobear.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"thedevelobear","buy_me_a_coffee":"thedevelobear"}},"created_at":"2018-11-12T23:28:34.000Z","updated_at":"2025-04-17T18:16:56.000Z","dependencies_parsed_at":"2024-06-18T12:42:30.778Z","dependency_job_id":"2e7a313c-c77c-4d78-a874-9474abfec599","html_url":"https://github.com/thedevelobear/react-rewards","commit_stats":{"total_commits":84,"total_committers":12,"mean_commits":7.0,"dds":0.5833333333333333,"last_synced_commit":"c61b0679dafe92cbc6ecde7daf063abddebb3b39"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedevelobear%2Freact-rewards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedevelobear%2Freact-rewards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedevelobear%2Freact-rewards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedevelobear%2Freact-rewards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thedevelobear","download_url":"https://codeload.github.com/thedevelobear/react-rewards/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249724950,"owners_count":21316123,"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":["balloons","confetti","emoji","front-end","micro-interactions","react","react-components","reactjs","rewards","user-experience","ux"],"created_at":"2024-07-31T02:01:22.034Z","updated_at":"2025-04-24T04:25:24.165Z","avatar_url":"https://github.com/thedevelobear.png","language":"TypeScript","funding_links":["https://github.com/sponsors/thedevelobear","https://buymeacoffee.com/thedevelobear"],"categories":["React","TypeScript","📦 Legacy \u0026 Inactive Projects","JavaScript"],"sub_categories":[],"readme":"![react-rewards logo](assets/react-rewards.png?raw=true \"react-rewards\")\n\n[![npm version](https://badge.fury.io/js/react-rewards.svg)](https://badge.fury.io/js/react-rewards) [![forthebadge](https://forthebadge.com/images/badges/makes-people-smile.svg)](https://forthebadge.com)\n\n:evergreen_tree: **Tree-shakeable**\n:female_detective: **Built with TypeScript**\n:package: **3.6kB gzipped**\n\nThis package was inspired by react-dom-confetti.\n\n**React-rewards** lets you add micro-interactions to your app, and rewards users with the rain of confetti, emoji or balloons in seconds.\nFiring confetti all over the page may seem like a questionable idea, but keep in mind that rewarding users for their actions is not.\nIf a huge cloud of smiling emoji doesn't fit your application well, try changing the physics config to make it more subtle.\n\nYou can read more on the subject of micro-interactions in my blog post – https://www.thedevelobear.com/post/microinteractions/\n\n#### Confetti\n\u003cp align=\"center\"\u003e\n\u003cimg alt='confetti demo gif' src=\"assets/confetti.gif\"/\u003e\n\u003c/p\u003e\n\n#### Balloons\n\u003cp align=\"center\"\u003e\n\u003cimg alt='balloons demo gif' src=\"assets/balloons.gif\"/\u003e\n\u003c/p\u003e\n\n#### Emoji\n\u003cp align=\"center\"\u003e\n\u003cimg alt='emoji demo gif' src=\"assets/emoji.gif\"/\u003e\n\u003c/p\u003e\n\n## Installation\n\nInstall from npm by typing ```npm install react-rewards``` or ```yarn add react-rewards``` while in your package.json directory.\n\n## Usage\n\nIn order to use the rewards, you'll need to provide an element that will become the origin of the animation. This element needs to have an ID that matches the one used inside the hook - it can be anywhere in the DOM as long as the IDs match.\n\nYou can place the element inside a button, center it and shoot up from the button.\nYou can place it on top of the viewport with position: \"fixed\" and change the angle to 270, to shoot downwards.\nTry, experiment, **have fun!**\n\nAnimation particles are set to position: 'fixed' by default, but this can be changed through a config object.\n\n#### Single reward\n\n**TIP:** Try using `\u003cspan id=“rewardId” style={{width: 2, height: 2, background: “red”}} /\u003e` to place the element correctly, wherever you want. Then just remove the styles.\n\n```js\nimport { useReward } from 'react-rewards';\n...\nconst { reward, isAnimating } = useReward('rewardId', 'confetti');\n...\n\u003cbutton\n    disabled={isAnimating}\n    onClick={reward}\n\u003e\n    \u003cspan id=\"rewardId\" /\u003e\n    🎉\n\u003c/button\u003e\n```\n\n#### Multiple rewards\n**TIP:** You can use the same ID to shoot from the same spot, or provide separate elements with unique IDs.\n```js\nimport { useReward } from 'react-rewards';\n...\nconst {reward: confettiReward, isAnimating: isConfettiAnimating} = useReward('confettiReward', 'confetti');\nconst {reward: balloonsReward, isAnimating: isBalloonsAnimating} = useReward('balloonsReward', 'balloons');\n...\n\u003cbutton\n    disabled={isConfettiAnimating || isBalloonsAnimating}\n    onClick={() =\u003e {\n        confettiReward();\n        balloonsReward();\n    }}\n\u003e\n    \u003cspan id=\"confettiReward\" /\u003e\n    \u003cspan id=\"balloonsReward\" /\u003e\n    🎉\n\u003c/button\u003e\n```\n\n### Props \u0026 config\n\nuseReward params:\n\n| name            | type   | description                                            | required   |default      |\n|-----------------|--------|--------------------------------------------------------|------------|-------------|\n| id              | string | A unique id of the element you want to shoot from      | yes        |             |\n| type            | string | 'confetti' / 'balloons' / 'emoji'                      | yes        |             |\n| config          | object | a configuration object described below                 | no         |see below    |\n\nConfetti config object: \n\n| name                | type   | description                                        | default                                                 |\n|---------------------|--------|----------------------------------------------------|---------------------------------------------------------|\n| fps                 | number | frames per second                                  | 60                                                      |\n| lifetime            | number | time of life                                       | 200                                                     |\n| angle               | number | initial direction of particles in degrees          | 90                                                      |\n| decay               | number | how much the velocity decreases with each frame    | 0.94                                                    |\n| spread              | number | spread of particles in degrees                     | 45                                                      |\n| startVelocity       | number | initial velocity of particles                      | 35                                                      |\n| elementCount        | number | particles quantity                                 | 50                                                      |\n| elementSize         | number | particle size in px                                | 8                                                       |\n| zIndex              | number | z-index of particles                               | 0                                                       |\n| position            | string | one of CSSProperties['position'] - e.g. \"absolute\" | \"fixed\"                                                 |\n| colors              | string[]| An array of colors used when generating confetti   | ['#A45BF1', '#25C6F6', '#72F753', '#F76C88', '#F5F770'] |\n| onAnimationComplete | () =\u003e void | A function that runs when animation completes      | undefined                                               |\n\nBalloons config object:\n\n| name            | type   | description                                            | default                   |\n|-----------------|--------|--------------------------------------------------------|---------------------------|\n| fps                 | number | frames per second                                  | 60                        |\n| lifetime        | number | time of life                                           | 600                       |\n| angle           | number | initial direction of balloons in degrees               | 90                        |\n| decay           | number | how much the velocity decreases with each frame        | 0.999                     |\n| spread          | number | spread of balloons in degrees                          | 50                        |\n| startVelocity   | number | initial velocity of the balloons                       | 3                         |\n| elementCount    | number | balloons quantity                                      | 10                        |\n| elementSize     | number | balloons size in px                                    | 20                        |\n| zIndex          | number | z-index of balloons                                    | 0                         |\n| position        | string | one of CSSProperties['position'] - e.g. \"absolute\"     | \"fixed\"                   |\n| colors          | string[]| An array of colors used when generating balloons       |['#A45BF1', '#25C6F6', '#72F753', '#F76C88', '#F5F770']|\n| onAnimationComplete | () =\u003e void | A function that runs when animation completes  | undefined                 |\n\nEmoji config object:\n\n| name            | type   | description                                            | default                   |\n|-----------------|--------|--------------------------------------------------------|---------------------------|\n| fps                 | number | frames per second                                  | 60                        |\n| lifetime        | number | time of life                                           | 200                       |\n| angle           | number | initial direction of emoji in degrees                  | 90                        |\n| decay           | number | how much the velocity decreases with each frame        | 0.94                      |\n| spread          | number | spread of emoji in degrees                             | 45                        |\n| rotate          | boolean| toggle rotation animation                              | true                      |\n| startVelocity   | number | initial velocity of emoji                              | 35                        |\n| elementCount    | number | emoji quantity                                         | 20                        |\n| elementSize     | number | emoji size in px                                       | 25                        |\n| zIndex          | number | z-index of emoji                                       | 0                         |\n| position        | string | one of CSSProperties['position'] - e.g. \"absolute\"     | \"fixed\"                   |\n| emoji           | string[]| An array of emoji to shoot                            |['🤓', '😊', '🥳']         |\n| onAnimationComplete | () =\u003e void | A function that runs when animation completes  | undefined                 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedevelobear%2Freact-rewards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedevelobear%2Freact-rewards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedevelobear%2Freact-rewards/lists"}