{"id":46787366,"url":"https://github.com/danilosetra/react-responsive-spritesheet","last_synced_at":"2026-03-10T02:02:52.203Z","repository":{"id":24608676,"uuid":"102033622","full_name":"danilosetra/react-responsive-spritesheet","owner":"danilosetra","description":"React component which helps you to easily apply responsive spritesheet animations on your project.","archived":false,"fork":false,"pushed_at":"2025-12-10T15:20:20.000Z","size":760,"stargazers_count":99,"open_issues_count":7,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-12-10T16:20:47.804Z","etag":null,"topics":["animation","animations","npm","react","responsive","spritesheet"],"latest_commit_sha":null,"homepage":null,"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/danilosetra.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":"2017-08-31T18:46:01.000Z","updated_at":"2025-12-10T15:20:24.000Z","dependencies_parsed_at":"2022-08-07T11:01:11.521Z","dependency_job_id":null,"html_url":"https://github.com/danilosetra/react-responsive-spritesheet","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/danilosetra/react-responsive-spritesheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilosetra%2Freact-responsive-spritesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilosetra%2Freact-responsive-spritesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilosetra%2Freact-responsive-spritesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilosetra%2Freact-responsive-spritesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danilosetra","download_url":"https://codeload.github.com/danilosetra/react-responsive-spritesheet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilosetra%2Freact-responsive-spritesheet/sbom","scorecard":{"id":320846,"data":{"date":"2025-08-11","repo":{"name":"github.com/danilosetra/react-responsive-spritesheet","commit":"796effb962b0d965ab59afed8da7eeed530b0d80"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.5,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 1/29 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-18T01:19:46.763Z","repository_id":24608676,"created_at":"2025-08-18T01:19:46.763Z","updated_at":"2025-08-18T01:19:46.763Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30322635,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T01:36:58.598Z","status":"online","status_checked_at":"2026-03-10T02:00:06.579Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","animations","npm","react","responsive","spritesheet"],"created_at":"2026-03-10T02:02:51.630Z","updated_at":"2026-03-10T02:02:52.196Z","avatar_url":"https://github.com/danilosetra.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Responsive Spritesheet\n[![Known Vulnerabilities](https://snyk.io/test/github/danilosetra/react-responsive-spritesheet/badge.svg)](https://snyk.io/test/github/danilosetra/react-responsive-spritesheet) [![Build Status](https://travis-ci.org/danilosetra/react-responsive-spritesheet.svg?branch=master)](https://travis-ci.org/danilosetra/react-responsive-spritesheet) [![npm](https://img.shields.io/npm/l/react-responsive-spritesheet.svg)](https://npmjs.org/package/r`eact-responsive-spritesheet) [![npm](https://img.shields.io/npm/v/react-responsive-spritesheet.svg)](https://npmjs.org/package/react-responsive-spritesheet) [![node version](https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square)](http://nodejs.org/download/)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/logo/rrs-logo.png\" width=\"250\" height=\"250\"\u003e\n\u003c/p\u003e\n\n## Hello, world!\n\nReact Responsive Spritesheet is a [React](https://facebook.github.io/react/) component which helps you to easily apply responsive spritesheet animations on your project. See our [basic example](https://stackblitz.com/edit/react-responsive-spritesheet-example-01?file=index.js).\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Options](#options)\n- [Call methods](#call-methods)\n- [Requesting infos](#requesting-infos)\n- [ForwardRef usage](#forwardref-usage)\n- [Examples](#examples)\n\n----------\n\n**New version 2 available!**\n- Now you can use horizontal, vertical or multi-row spritesheet image;\n- Orientation parameter is no longer required;\n- Spritesheet image is preloaded before initialization;\n- The animation can be rewinded with **setDirection()** method and/or with **direction** parameter;\n- Direction information is provided by **getInfo()** method;\n\nFor previous versions, see our [release tags](https://github.com/danilosetra/react-responsive-spritesheet/tags)\n\n----------\n\n## Installation\n\n```bash\n$ npm install react-responsive-spritesheet --save\n```\n\n\n----------\n\n\n## Usage\n\n**Basic usage with required parameters**\n\n```javascript\nimport Spritesheet from 'react-responsive-spritesheet';\n\nclass App extends Component {\n\n  render() {\n\n    return (\n      \u003cSpritesheet\n        image={`http://www.example.com/assets/image.png`}\n        widthFrame={800}\n        heightFrame={648}\n        steps={46}\n        fps={12}\n      /\u003e\n    );\n\n  }\n\n}\n```\n\n**Complete usage with all parameters**\n\n```javascript\nimport Spritesheet from 'react-responsive-spritesheet';\n\nclass App extends Component {\n\n  render() {\n\n    return (\n      \u003cSpritesheet\n        className={`my-element__class--style`}\n        style={{ backgroundColor: 'red' }}\n        image={`http://www.example.com/assets/image.png`}\n        widthFrame={800}\n        heightFrame={648}\n        steps={46}\n        fps={12}\n        direction={`forward`}\n        timeout={1800}\n        autoplay={false}\n        loop={true}\n        startAt={10}\n        endAt={30}\n        background={`http://www.example.com/assets/image.png`}\n        backgroundSize={`cover`}\n        backgroundRepeat={`no-repeat`}\n        backgroundPosition={`center center`}\n        getInstance={spritesheet =\u003e {\n          this.spriteInstance = spritesheet;\n        }}\n        onClick={spritesheet =\u003e {\n          spritesheet.play();\n        }}\n        onDoubleClick={spritesheet =\u003e {\n          console.log( spritesheet.getInfo('isPlaying') );\n        }}\n        onMouseMove={spritesheet =\u003e {\n          console.log( 'onMouseMove', spritesheet.getInfo('frame') );\n        }}\n        onMouseEnter={spritesheet =\u003e {\n          console.log('onMouseEnter');\n        }}\n        onMouseLeave={spritesheet =\u003e {\n          console.log('onMouseLeave');\n        }}\n        onMouseOver={spritesheet =\u003e {\n          console.log('onMouseOver');\n        }}\n        onMouseOut={spritesheet =\u003e {\n          console.log('onMouseOut');\n        }}\n        onMouseDown={spritesheet =\u003e {\n          console.log('onMouseDown');\n        }}\n        onMouseUp={spritesheet =\u003e {\n          console.log('onMouseUp');\n        }}\n        onInit={spritesheet =\u003e {\n          console.log('onInit');\n        }}\n        onResize={spritesheet =\u003e {\n          console.log( 'onResize', spritesheet.getInfo('frame') );\n        }}\n        onPlay={spritesheet =\u003e {\n          console.log('onPlay');\n        }}\n        onPause={spritesheet =\u003e {\n          console.log('onPause');\n        }}\n        onLoopComplete={spritesheet =\u003e {\n          console.log('onLoopComplete');\n        }}\n        onEachFrame={spritesheet =\u003e {\n          console.log('onEachFrame');\n        }}\n        onEnterFrame={[\n          {\n            frame: 2,\n            callback: (() =\u003e {\n              console.log('passed by frame 2')\n            })\n          },\n          {\n            frame: 7,\n            callback: (() =\u003e {\n              console.log('passed by frame 7')\n            })\n          }\n        ]}\n      /\u003e\n    );\n\n  }\n\n}\n```\n\n----------\n\n## Options\n\n| Required | Parameter | Type | Example | Description |\n| :------------: | ------------ | ------------ | ------------ | ------------ |\n|   | **className** | `string` | 'my-element__class--style' | *Applies a classname for spritehseet container* |\n|   | **style** | `object` | { backgroundColor: 'red', display: 'flex' } | *Applies inline style for spritehseet container* |\n| \u0026#10003; | **image** | `string` | 'http://yyy.com/image.png' | *URL or path of image to animate* |\n| \u0026#10003; | **widthFrame** | `number` | 800 | *Original width of each frame, in pixels* |\n| \u0026#10003; | **heightFrame** | `number` | 800 | *Original height of each frame, in pixels* |\n| \u0026#10003; | **steps** | `number` | 47 | *Total frames / steps present on animation image* |\n| \u0026#10003; | **fps** | `number` | 12 | *Velocity / Animation frames per second* |\n| \u0026#10003; | **direction** | `string` | 'rewind' | *'forward' or 'rewind' direction to display frames. It allows rewind the animation. Default: 'forward'* |\n|   | **timeout** | `number` | 1200 | *Delay for start animating. The '**autoplay**' option must be **true*** |\n|   | **autoplay** | `boolean` | false | *Determines if animation starts automatically* |\n|   | **loop** | `boolean` | false | *Determines if animation replay on end* |\n|   | **isResponsive** | `boolean` | true | *Determines if animation resizes according window resize* |\n|   | **startAt** | `number` | false | *Determines the first frame which will be displayed on start to animate* |\n|   | **endAt** | `number` | false | *Determines the last frame which will be displayed on stop animation* |\n|   | **background** | `string` | '/assets/background.png' | *URL or path of background image placed behind animation* |\n|   | **backgroundSize** | `string` | 'cover' | *Style for background image* |\n|   | **backgroundRepeat** | `string` | 'no-repeat' | *Style for background image* |\n|   | **backgroundPosition** | `string` | 'center center' | *Style for background image* |\n|   | **getInstance** | `callback` |   | *Returns callback instance for spritesheet controls* |\n|   | **onClick** | `function` |   | *Provides onClick callback function for spritesheet container* |\n|   | **onDoubleClick** | `function` |   | *Provides onDoubleClick callback function for spritesheet container* |\n|   | **onMouseMove** | `function` |   | *Provides onMouseMove callback function for spritesheet container* |\n|   | **onMouseEnter** | `function` |   | *Provides onMouseEnter callback function for spritesheet container* |\n|   | **onMouseLeave** | `function` |   | *Provides onMouseLeave callback function for spritesheet container* |\n|   | **onMouseOver** | `function` |   | *Provides onMouseOver callback function for spritesheet container* |\n|   | **onMouseOut** | `function` |   | *Provides onMouseOut callback function for spritesheet container* |\n|   | **onMouseDown** | `function` |   | *Provides onMouseDown callback function for spritesheet container* |\n|   | **onMouseUp** | `function` |   | *Provides onMouseUp callback function for spritesheet container* |\n|   | **onInit** | `function` |   | *Provides callback function when the spritesheet initializes* |\n|   | **onResize** | `function` |   | *Provides callback function when the spritesheet resizes* |\n|   | **onPlay** | `function` |   | *Provides callback function when the spritesheet plays. spritesheet.goToAndPlay(x) method also fires this callback* |\n|   | **onPause** | `function` |   | *Provides callback function when the spritesheet pauses. spritesheet.goToAndPause(x) method also fires this callback* |\n|   | **onLoopComplete** | `function` |   | *Provides callback function when the animation completes a loop cicle* |\n|   | **onEachFrame** | `function` |   | *Provides callback function when each animation frame is changed* |\n|   | **onEnterFrame** | `array` |   | *Accepts an array of callback functions when the specific animation frame is displayed* |\n\n----------\n\n## Call methods\n\nUsing the instance provided on callback functions you can call some methods\n\nExample\n\n```javascript\nonMouseEnter={spritesheet =\u003e {\n  console.log( spritesheet.setStartAt(6) );\n}}\n```\n\n| Method | Call | Description |\n| ------------ | ------------ | ------------ |\n| **play** | `spritesheet.play()` | Plays the animation from current frame |\n| **pause** | `spritesheet.pause()` | Pauses the animation on current frame |\n| **goToAndPlay** | `spritesheet.goToAndPlay(frameNumber)` | Plays the animation from specified frame as argument |\n| **goToAndPause** | `spritesheet.goToAndPause(frameNumber)` | Pauses the animation on specified frame |\n| **setStartAt** | `spritesheet.setStartAt(frameNumber)` | Sets the first frame to be displayed on animation starts. It will be considered on loop cycles. |\n| **setEndAt** | `spritesheet.setEndAt(frameNumber)` | Sets the last frame to be displayed on animation ends. It will be considered on loop cycles. |\n| **setFps** | `spritesheet.setFps(fpsNumber)` | Sets the fps (speed) of animation, even while is playing |\n| **setDirection** | `spritesheet.setDirection('rewind')` | Sets the direction of animation forward or rewind |\n| **getInfo** | `spritesheet.getInfo('stringInfoToRetrieve')` | Returns some real-time information about spritesheet. See below on **[Requesting infos](#requesting-infos)** section |\n\n----------\n\n## Requesting infos\n\nUsing the instance.getInfo(x) method provided on callback functions you can request a real-time information about your spritesheet animation\n\nExample\n\n```javascript\nonMouseEnter={spritesheet =\u003e {\n  console.log( spritesheet.getInfo('frame') );\n}}\n```\n\n| Parameter | Type | Returns |\n| ------------ | ------------ | ------------ |\n| **frame** | `number` | current frame of animation |\n| **fps** | `number` | current frames per second (speed) |\n| **steps** | `number` | total number of animation steps |\n| **width** | `number` | scaled animation width, in pixels |\n| **height** | `number` | scaled animation height, in pixels |\n| **scale** | `number` | scale of spritesheet, based on default sizes, note that scale=1 is relative to original size |\n| **direction** | `string` | direction 'forward' or 'rewind' playing |\n| **isPlaying** | `boolean` | if animation is currently playing, returns true |\n| **isPaused** | `boolean` | if animation is currently paused or stopped, returns true |\n| **completeLoopCicles** | `number` | total number of cycles (loops) the animation has completed |\n\n----------\n\n## Examples\n\n**Example #1**\nA basic usage with minimal parameters for spritesheet animation loop starting automatically.\n\n[live demo](https://react-responsive-spritesheet-example-01.stackblitz.io/) / [edit source code](https://stackblitz.com/edit/react-responsive-spritesheet-example-01?file=index.js)\n\n```javascript\n\u003cSpritesheet\n  className={`my-element__class--style`}\n  image={`https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/examples/sprite-image-horizontal.png`}\n  widthFrame={420}\n  heightFrame={500}\n  steps={14}\n  fps={10}\n  autoplay={true}\n  loop={true}\n/\u003e\n```\n\n----------\n\n**Example #2**\nUsing parameters **onMouseEnter** and **onMouseLeave** for play and pause animation\n\n[live demo](https://react-responsive-spritesheet-example-02.stackblitz.io/) / [edit source code](https://stackblitz.com/edit/react-responsive-spritesheet-example-02?file=index.js)\n\n```javascript\n\u003cSpritesheet\n  className={`my-element__class--style`}\n  image={`https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/examples/sprite-image-horizontal.png`}\n  widthFrame={420}\n  heightFrame={500}\n  steps={14}\n  fps={10}\n  autoplay={false}\n  loop={true}\n  onMouseEnter={spritesheet =\u003e {\n    spritesheet.play();\n  }}\n  onMouseLeave={spritesheet =\u003e {\n    spritesheet.pause();\n  }}\n/\u003e\n```\n\n----------\n\n**Example #3**\n\nUsing spritesheet instance to controls outside parameters, on your own functions.\n\n[live demo](https://react-responsive-spritesheet-example-03.stackblitz.io/) / [edit source code](https://stackblitz.com/edit/react-responsive-spritesheet-example-03?file=index.js)\n\nFirst, we use **getInstance** parameter to get instance and set **this.spritesheetInstance** to be used on your whole component, see below:\n\n```javascript\n\u003cSpritesheet\n  className={`my-element__class--style`}\n  image={`https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/examples/sprite-image-horizontal.png`}\n  widthFrame={420}\n  heightFrame={500}\n  steps={14}\n  fps={10}\n  autoplay={false}\n  loop={true}\n  getInstance={spritesheet =\u003e {\n    this.spritesheeInstance = spritesheet;\n  }}\n/\u003e\n```\n\nThen, we can create buttons or whatever and set their own functions:\n\n```javascript\n\u003cdiv\u003e\n  \u003cbutton onClick={this.myFunctionPlay.bind(this)}\u003eplay\u003c/button\u003e\n  \u003cbutton onClick={this.myFunctionPause.bind(this)}\u003epause\u003c/button\u003e\n  \u003cbutton onClick={this.myFunctionGetFrame.bind(this)}\u003ealert current frame\u003c/button\u003e\n  \u003cbutton onClick={this.myFunctionToggleDirection.bind(this)}\u003etoggle direction\u003c/button\u003e\n\u003c/div\u003e\n```\n\n```javascript\nmyFunctionPlay(){\n  this.spritesheeInstance.play();\n}\n\nmyFunctionPause(){\n  this.spritesheeInstance.pause();\n}\n\nmyFunctionGetFrame(){\n  alert(this.spritesheeInstance.getInfo('frame'));\n}\n\nmyFunctionToggleDirection(){\n  if(this.spritesheeInstance.getInfo('direction') === 'forward'){\n    this.spritesheeInstance.setDirection('rewind');\n  } else if(this.spritesheeInstance.getInfo('direction') === 'rewind'){\n    this.spritesheeInstance.setDirection('forward');\n  }\n}\n```\n\n----------\n\n**Example #4**\nUsing background image\n\n[live demo](https://react-responsive-spritesheet-example-04.stackblitz.io/) / [edit source code](https://stackblitz.com/edit/react-responsive-spritesheet-example-04?file=index.js)\n\n```javascript\n\u003cSpritesheet\n  className={`my-element__class--style`}\n  image={`https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/examples/sprite-image-horizontal.png`}\n  widthFrame={420}\n  heightFrame={500}\n  steps={14}\n  fps={10}\n  autoplay={true}\n  loop={true}\n  background={`https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/examples/sprite-image-background.png`}\n  backgroundSize={`cover`}\n  backgroundRepeat={`no-repeat`}\n  backgroundPosition={`center center`}\n/\u003e\n```\n\n----------\n\n## ForwardRef usage\n\nYou can control the spritesheet instance directly using a React ref. The component supports `forwardRef`, so `ref.current` exposes the same instance methods available in callbacks.\n\n**JavaScript (function component)**\n\n```jsx\nimport React, { useRef } from 'react';\nimport Spritesheet from 'react-responsive-spritesheet';\n\nexport default function Example() {\n  const spriteRef = useRef(null);\n\n  return (\n    \u003cdiv\u003e\n      \u003cSpritesheet\n        ref={spriteRef}\n        image={`https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/examples/sprite-image-horizontal.png`}\n        widthFrame={420}\n        heightFrame={500}\n        steps={14}\n        fps={10}\n        autoplay={false}\n        loop={true}\n      /\u003e\n\n      \u003cbutton onClick={() =\u003e spriteRef.current \u0026\u0026 spriteRef.current.play()}\u003eplay\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e spriteRef.current \u0026\u0026 spriteRef.current.pause()}\u003epause\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e spriteRef.current \u0026\u0026 spriteRef.current.goToAndPlay(5)}\u003ego to 5 \u0026 play\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**TypeScript (function component, typed ref)**\n\n```tsx\nimport React, { useRef } from 'react';\nimport Spritesheet from 'react-responsive-spritesheet';\n\ntype SpritesheetRef = React.ComponentRef\u003ctypeof Spritesheet\u003e;\n\nexport default function ExampleTs() {\n  const spriteRef = useRef\u003cSpritesheetRef\u003e(null);\n\n  const handleToggle = () =\u003e {\n    if (!spriteRef.current) return;\n    const isPlaying = spriteRef.current.getInfo('isPlaying');\n    isPlaying ? spriteRef.current.pause() : spriteRef.current.play();\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cSpritesheet\n        ref={spriteRef}\n        image={`https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/examples/sprite-image-horizontal.png`}\n        widthFrame={420}\n        heightFrame={500}\n        steps={14}\n        fps={10}\n        autoplay={false}\n        loop={true}\n      /\u003e\n\n      \u003cbutton onClick={handleToggle}\u003etoggle play/pause\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e spriteRef.current?.setDirection('rewind')}\u003erewind\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e spriteRef.current?.setFps(24)}\u003eset fps to 24\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**Class component**\n\n```jsx\nimport React from 'react';\nimport Spritesheet from 'react-responsive-spritesheet';\n\nclass ExampleClass extends React.Component {\n  spriteRef = React.createRef();\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cSpritesheet\n          ref={this.spriteRef}\n          image={`https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/examples/sprite-image-horizontal.png`}\n          widthFrame={420}\n          heightFrame={500}\n          steps={14}\n          fps={10}\n          autoplay={false}\n          loop={true}\n        /\u003e\n\n        \u003cbutton onClick={() =\u003e this.spriteRef.current \u0026\u0026 this.spriteRef.current.play()}\u003eplay\u003c/button\u003e\n        \u003cbutton onClick={() =\u003e this.spriteRef.current \u0026\u0026 this.spriteRef.current.pause()}\u003epause\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nNotes:\n- The ref exposes methods like `play`, `pause`, `goToAndPlay`, `goToAndPause`, `setStartAt`, `setEndAt`, `setFps`, `setDirection`, and `getInfo`.\n- `getInstance` continues to work; choose either `ref` or `getInstance` based on your preference.\n\n----------\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanilosetra%2Freact-responsive-spritesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanilosetra%2Freact-responsive-spritesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanilosetra%2Freact-responsive-spritesheet/lists"}