{"id":17725649,"url":"https://github.com/fedemartinm/react-award","last_synced_at":"2025-03-14T06:31:34.505Z","repository":{"id":65231790,"uuid":"587067487","full_name":"fedemartinm/react-award","owner":"fedemartinm","description":"React component for rewarding users","archived":false,"fork":false,"pushed_at":"2023-01-25T22:11:03.000Z","size":375,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-29T09:54:18.148Z","etag":null,"topics":["awards","gamification","lottie","react"],"latest_commit_sha":null,"homepage":"","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/fedemartinm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-09T22:02:39.000Z","updated_at":"2024-05-18T22:22:21.000Z","dependencies_parsed_at":"2023-02-14T12:01:20.273Z","dependency_job_id":null,"html_url":"https://github.com/fedemartinm/react-award","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedemartinm%2Freact-award","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedemartinm%2Freact-award/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedemartinm%2Freact-award/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedemartinm%2Freact-award/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fedemartinm","download_url":"https://codeload.github.com/fedemartinm/react-award/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221437811,"owners_count":16821110,"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":["awards","gamification","lottie","react"],"created_at":"2024-10-25T16:05:13.987Z","updated_at":"2024-10-25T16:05:14.531Z","avatar_url":"https://github.com/fedemartinm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![npm](https://img.shields.io/npm/v/react-award)\n\n# React Award\n\nThis React component displays a solid color mask with the silhouette of an image, and when triggered, it performs a fade-in effect to reveal the image. Additionally, the component also plays a Lottie animation. \n\nAlternatively, a component can be passed as a child instead of an image, transition effects and lottie animation will be applied but the silhouette will not be displayed.\n\nThe idea behind this package is to add gamification to the applications we write by rewarding the user for achieving different achievements. I welcome any suggestions for including other gamification components in this library, feel free to contribute.\n\n👉 The standalone use of this library (if you are not using lottie-web or any wrapper) is `291kb` for the full version and `164kb` for the light version. It is compatible with packages `lottie-react`, `@LottieFiles/lottie-react` and `react-lottie-player`, and using it together only adds a few extra kilobytes to your bundle. Check the \"Compatibility and performance\" section for more information.\n\n### Examples\n \n Basic       |   Custom component   \n:-------------------------:|:-------------------------:\n \u003cimg src=\"https://user-images.githubusercontent.com/33937355/211485759-8ff43341-8efd-4b15-bb04-ab94842dba51.gif\" data-canonical-src=\"https://user-images.githubusercontent.com/33937355/211485759-8ff43341-8efd-4b15-bb04-ab94842dba51.gif\" width=\"200\" height=\"200\" /\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/33937355/212456822-a3c1347c-1584-4cfa-ba1c-e1ba930bba57.gif\" data-canonical-src=\"https://user-images.githubusercontent.com/33937355/212456822-a3c1347c-1584-4cfa-ba1c-e1ba930bba57.gif\" width=\"200\" height=\"200\" /\u003e\n Customized       |   Using placeholder  \n\u003cimg src=\"https://user-images.githubusercontent.com/33937355/211487836-21ee4877-9aa4-4750-afe5-e5d890186e05.gif\" data-canonical-src=\"https://user-images.githubusercontent.com/33937355/211487836-21ee4877-9aa4-4750-afe5-e5d890186e05.gif\" width=\"200\" height=\"200\" /\u003e |  \u003cimg src=\"https://user-images.githubusercontent.com/33937355/211488215-6f432bde-373b-40b7-bd41-d810e91fd391.gif\" data-canonical-src=\"https://user-images.githubusercontent.com/33937355/211488215-6f432bde-373b-40b7-bd41-d810e91fd391.gif\" width=\"200\" height=\"200\" /\u003e \n\n### Installation\n\n```shell\nyarn add react-award\n```\n\nor\n\n```shell\nnpm install react-award --save\n```\n\n### Basic Usage\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Award } from 'react-award';\n\nimport 'react-award/dist/react-award.css';\n\n// user-defined assets\n// import image from './image.png';\n// import animation from './lottie-animation.png';\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cAward \n          playOnHover={true} \n          image={'https://raw.githubusercontent.com/fedemartinm/react-award/main/example/images/award.svg'}\n          animation={'https://raw.githubusercontent.com/fedemartinm/react-award/main/example/animations/confetti.json'}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n### Customize animation size\n```javascript\n...\n  \u003cAward \n      playOnHover={true} \n      image={image} \n      animation={animation}\n      playerStyle={{\n          top: '-50%',\n          left: '-50%',\n          width: '200%',\n          height: '200%',\n    }}/\u003e\n```\n\n### Customize image size\n\nImage and mask image components default to width 100% and height 100%. You can change the image size\nby changing the container size: \n\n```javascript\n...\n  \u003cAward \n      playOnHover={true} \n      image={image} \n      animation={animation}\n      style={{\n          height: 200,\n          width: 200,\n    }}/\u003e\n```\n\nYou can check the example within the repository to see how the package can be utilized.\n\n### Compatibility and performance\nIf you are already using lottie animations in your project, it is likely that you have installed packages `lottie-react`, `@LottieFiles/lottie-react` or `react-lottie-player`. Since those packages and react-award are based on lottie-web, you will not have any issues with the size of the application.\n\nKeep in mind the following points to reduce the size of your bundle:\n- Use the same version of lottie in react-award and in your lottie wrapper. \n  For example:\n  ```javascript\n  import LottiePlayer from 'react-lottie-player/dist/LottiePlayerLight';\n  ...\n  // previous import works well with:\n  import { Award } from 'react-award/dist/react-award-light';\n  ```\n- Use the lightweight version of react-award if you don't have other animations\n  For example:\n  ```javascript\n  import { Award } from 'react-award/dist/react-award-light';\n  ```\n\n\n### Props\n\n| Prop | Type | Description | Notes |\n| ---- | ---- | ----------- | ----- |\n| image | string | The 'source' property of an image | It can be an imported asset or a URL string |\n| animation | string | Lottie animation file | It can be an imported asset or a URL string |\n| duration | number | Use this property to define the duration of the transition | It does not affect the duration of the animation |\n| play | boolean | Set to 'true' to play the animation | This is ignored if 'playOnHover' is set to 'true' |\n| playOnHover | boolean | If this is set to 'true', the animation will be triggered when the user moves the mouse over the component | | \n| backgroundColor | boolean | To change the mask color | | \n| showPlaceholder | boolean | Set this property to 'true' to show a placeholder effect when the animation is not ready to be displayed | | \n| speed | number | Animation speed | |\n| segments | [ number, number ] | Use this property to play only specific segments of the animation | |\n| style | CSSProperties | Container styles | | \n| imageStyle | CSSProperties | Image styles | | \n| maskStyle | CSSProperties | Mask styles | | \n| playerStyle | CSSProperties | Player styles | | \n| onComplete | () =\u003e void | Called when the lottie animation has finished | |\n\n\n\n## Licence\n\n[MIT](https://github.com/fedemartinm/react-award/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffedemartinm%2Freact-award","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffedemartinm%2Freact-award","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffedemartinm%2Freact-award/lists"}