{"id":13606741,"url":"https://github.com/jcblw/react-sprite-animator","last_synced_at":"2025-04-09T21:16:34.601Z","repository":{"id":4011770,"uuid":"51660061","full_name":"jcblw/react-sprite-animator","owner":"jcblw","description":"A React component that animates simple spritesheets","archived":false,"fork":false,"pushed_at":"2023-04-03T14:00:21.000Z","size":1928,"stargazers_count":85,"open_issues_count":27,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T21:16:27.013Z","etag":null,"topics":["animates","sprites"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jcblw.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}},"created_at":"2016-02-13T18:48:13.000Z","updated_at":"2025-03-06T17:59:46.000Z","dependencies_parsed_at":"2023-02-15T13:31:14.077Z","dependency_job_id":"e3b4e60a-78d5-41b6-bca4-939590886718","html_url":"https://github.com/jcblw/react-sprite-animator","commit_stats":{"total_commits":234,"total_committers":13,"mean_commits":18.0,"dds":0.3418803418803419,"last_synced_commit":"56456cd4dafcb048735df5d50091d22ff41aab37"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcblw%2Freact-sprite-animator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcblw%2Freact-sprite-animator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcblw%2Freact-sprite-animator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcblw%2Freact-sprite-animator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcblw","download_url":"https://codeload.github.com/jcblw/react-sprite-animator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111973,"owners_count":21049578,"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":["animates","sprites"],"created_at":"2024-08-01T19:01:11.990Z","updated_at":"2025-04-09T21:16:34.573Z","avatar_url":"https://github.com/jcblw.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Sprite Animator\n\n![Dependabot](https://api.dependabot.com/badges/status?host=github\u0026repo=jcblw/react-sprite-animator)\n\nThis is a component that animates through an image sprite.\n\n- [Animated Heart Example](http://react-sprite-animator.surge.sh/)\n\n\u003cimg src='https://raw.githubusercontent.com/jcblw/react-sprite-animator/master/examples/padman-go.gif' width='120px' height='134px'\u003e\n\n### Install\n\n```shell\nnpm i react-sprite-animator -S\n# or\nyarn add react-sprite-animator\n```\n\n**React** is used with this library but do not come bundled with this library. Please make sure you have those installed before using.\n\n### Usage\n\nYou are able to use this library as a component or as a hook.\n\n#### The component\n\n```javascript\nimport { SpriteAnimator } from 'react-sprite-animator'\n...\n\u003cSpriteAnimator\n  sprite=\"/path-to/sprite.svg\"\n  width={100}\n  height={100}\n/\u003e\n```\n\n#### The hook\n\n```javascript\nimport { useSprite } from 'react-sprite-animator'\n\nconst MyComponent = () =\u003e {\n  const styles = useSprite({\n    sprite: '/path-to/sprite.svg',\n    width: 100,\n    height: 100,\n  })\n\n  return \u003cdiv style={style} /\u003e\n}\n```\n\n### Props\n\nThis is the same for the hooks options and the props of the component.\n\n- width **{number}** - width of clipped sprite (original, non-scaled dimensions)\n- height **{number}** - height of clipped sprite (original, non-scaled dimensions)\n- scale **{number}** - scale of the original sprite (default: 1, retina / @2x: 2)\n- sprite **{string}** - path to sprite\n- direction **{string}** - horizontal/vertical\n- shouldAnimate **{bool}** - if the sprite should animate\n- startFrame **{number}** - the frame to start animation\n- fps **{number}** - the frame rate (frames per second) target\n- stopLastFrame **{bool}** - stops animation from looping\n- frame **{number}** - manually sets current frame\n- onEnd **{function}** - callback when the animation finishes (only triggered when stopLastFrame is true)\n\n**Only required for two-dimensional sprites**\n\n- frameCount **{number}** - the total frame count of the sprite\n- wrapAfter **{number}** - the row or column count of the sprite (direction: \"horizontal\" -\u003e columns, \"vertical\" -\u003e rows)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcblw%2Freact-sprite-animator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcblw%2Freact-sprite-animator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcblw%2Freact-sprite-animator/lists"}