# @types/react-responsive-spritesheet

> TypeScript definitions for react-responsive-spritesheet

Latest version **1.0.4** (published 2025-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @types/react-responsive-spritesheet
pnpm add @types/react-responsive-spritesheet
yarn add @types/react-responsive-spritesheet
bun add @types/react-responsive-spritesheet
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; no vulnerabilities; high maintenance score; popular repo; extremely popular.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2025-11-18 |
| First published | 2021-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 51449 |
| Maintainers | types |

## Links

- npm: https://www.npmjs.com/package/@types/react-responsive-spritesheet
- Repository: https://github.com/DefinitelyTyped/DefinitelyTyped
- Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-responsive-spritesheet
- npm.io page: https://npm.io/package/@types/react-responsive-spritesheet

## Dependencies (2)

- [csstype](https://npm.io/package/csstype.md) ^3.2.2
- [@types/react](https://npm.io/package/@types/react.md) *

## Recent versions

- 1.0.4 (latest) — 2025-11-18
- 1.0.3 (ts5.1) — 2023-11-07
- 1.0.0 (ts3.9) — 2021-12-30
- 1.0.2 — 2023-10-18
- 1.0.1 — 2023-09-27

## README

# Installation
> `npm install --save @types/react-responsive-spritesheet`

# Summary
This package contains type definitions for react-responsive-spritesheet (https://github.com/danilosetra/react-responsive-spritesheet).

# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-responsive-spritesheet.
## [index.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-responsive-spritesheet/index.d.ts)
````ts
import * as CSS from "csstype";
import * as React from "react";

export default class ReactResponsiveSpritesheet extends React.Component<Props> {
    play(): void;
    pause(): void;
    goToAndPlay(frame: number): void;
    goToAndPause(frame: number): void;
    setStartAt(frame: number): void;
    setEndAt(frame: number): void;
    setFps(fps: number): void;
    setDirection(direction: Direction): void;
    getInfo(type: NumberInfoType): number;
    getInfo(type: BooleanInfoType): boolean;
    getInfo(type: "direction"): Direction;
}

export interface Props {
    className?: string;
    style?: CSS.Properties;
    image: string;
    widthFrame: number;
    heightFrame: number;
    steps: number;
    fps: number;
    direction: Direction;
    timeout?: number;
    autoplay?: boolean;
    loop?: boolean;
    isResponsive?: boolean;
    startAt?: number;
    endAt?: number;
    background?: string;
    backgroundSize?: CSS.Property.BackgroundSize;
    backgroundRepeat?: CSS.Property.BackgroundRepeat;
    backgroundPosition?: CSS.Property.BackgroundPosition;
    getInstance?: Callback;
    onClick?: Callback;
    onDoubleClick?: Callback;
    onMouseMove?: Callback;
    onMouseEnter?: Callback;
    onMouseLeave?: Callback;
    onMouseOver?: Callback;
    onMouseOut?: Callback;
    onMouseDown?: Callback;
    onMouseUp?: Callback;
    onInit?: Callback;
    onResize?: Callback;
    onPlay?: Callback;
    onPause?: Callback;
    onLoopComplete?: Callback;
    onEachFrame?: Callback;
    onEnterFrame?: Array<{
        frame: number;
        callback: () => void;
    }>;
}

export type Callback = (spritesheet: ReactResponsiveSpritesheet) => void;
export type Direction = "forward" | "rewind";
export type NumberInfoType = "frame" | "fps" | "steps" | "width" | "height" | "scale" | "completeLoopCicles";
export type BooleanInfoType = "isPlaying" | "isPaused";

````

### Additional Details
 * Last updated: Tue, 18 Nov 2025 02:14:41 GMT
 * Dependencies: [@types/react](https://npmjs.com/package/@types/react), [csstype](https://npmjs.com/package/csstype)

# Credits
These definitions were written by [Michael Liu](https://github.com/triangularcube).

---
_Source: https://npm.io/package/@types/react-responsive-spritesheet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._