{"id":16440649,"url":"https://github.com/uyarn/react-use-firework","last_synced_at":"2025-03-23T08:31:56.379Z","repository":{"id":44679718,"uuid":"400214266","full_name":"uyarn/react-use-firework","owner":"uyarn","description":"A simple react hook to create click-firework animation","archived":false,"fork":false,"pushed_at":"2025-02-02T03:07:57.000Z","size":1220,"stargazers_count":6,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T13:26:08.927Z","etag":null,"topics":["animation","firework","react"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/compassionate-mcnulty-1rppg","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/uyarn.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-26T15:17:23.000Z","updated_at":"2025-02-02T03:08:02.000Z","dependencies_parsed_at":"2024-06-21T04:18:53.060Z","dependency_job_id":"7cdce979-4ff1-471f-b55d-3b7ef7f16a21","html_url":"https://github.com/uyarn/react-use-firework","commit_stats":{"total_commits":25,"total_committers":2,"mean_commits":12.5,"dds":"0.16000000000000003","last_synced_commit":"89c74bad15dc4ff5589cb01fe9c7b2946e2546d8"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uyarn%2Freact-use-firework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uyarn%2Freact-use-firework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uyarn%2Freact-use-firework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uyarn%2Freact-use-firework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uyarn","download_url":"https://codeload.github.com/uyarn/react-use-firework/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245078067,"owners_count":20557274,"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":["animation","firework","react"],"created_at":"2024-10-11T09:12:39.937Z","updated_at":"2025-03-23T08:31:55.980Z","avatar_url":"https://github.com/uyarn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-use-firework 🎆\n\n[![npm version](https://img.shields.io/npm/v/react-use-firework.svg?style=flat)](https://www.npmjs.com/package/react-use-firework)\n[![npm version](https://img.shields.io/npm/dm/react-use-firework)](https://www.npmjs.com/package/react-use-firework)\n\n- A simple react hook to create click-firework animation 🎆\n\n### Demo 🪞\n\n[![Edit react-use-ripple demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/compassionate-mcnulty-1rppg)\n\n### Install 📦\n\n```shell\nyarn add react-use-firework\n```\n\n### Usage 📋\n\n```js\nimport React, { useRef } from \"react\";\n\nimport useFireWork from \"react-use-firework\";\n\nexport component = ()=\u003e {\n  const ref = useRef(null);\n  useFireWork(ref);\n\n  return (\n    \u003cdiv\n     ref={ref}\n     style={{ width: \"100%\", height: \"600px\", background: \"#000\" }}\n    /\u003e\n  );\n}\n\n```\n\n### API\n\nthe usage demo above is the basic usage with default setting of useFirewrok, you can use it with some options like `useFirework(ref,{ count: 10, ...otherOptions })` as well and the supporting options arguments are like the table below\n\n| name        | type          | default                           | description                                     |\n| ----------- | ------------- | --------------------------------- | ----------------------------------------------- |\n| count       | number        | 30                                | The number of the firework dot                  |\n| duration    | number        | 1500                              | the millisecond of the duration of firework     |\n| size        | number        | 6                                 | the size of each firework dot                   |\n| range       | number        | 200                               | the spread range radius of the firework         |\n| colors      | Array\u003cstring\u003e | [\"#f59342\", '#f5e942', '#f54242'] | the color of the firework                       |\n| randomColor | boolean       | false                             | whether to apply random color into the firework |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuyarn%2Freact-use-firework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuyarn%2Freact-use-firework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuyarn%2Freact-use-firework/lists"}