@mhmmt/react-dotlottie-player 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# React DotLottie Player
+
+Play Lottie animations in React — supports both `.json` and `.lottie` files.
+
+## Features
+
+- Play `.json` Lottie animations
+- Play `.lottie` animations (automatically unzips)
+- SSR-safe with dynamic import
+- Full TypeScript support
+- Tree-shakeable exports
+
+## Installation
+
+```bash
+npm install react-dotlottie-player
+```
+
+## Peer Dependencies
+
+```bash
+npm install react react-dom
+```
+
+## Usage
+
+```tsx
+import { DotLottiePlayer } from 'react-dotlottie-player';
+
+function App() {
+  return (
+    <DotLottiePlayer
+      src="/animation.json"
+      loop
+      autoplay
+      speed={1}
+      onLoad={() => console.log('Animation loaded')}
+      onError={(error) => console.error('Error:', error)}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string` | **required** | URL to `.json` or `.lottie` file |
+| `loop` | `boolean` | `false` | Loop animation |
+| `autoplay` | `boolean` | `true` | Auto-play on load |
+| `speed` | `number` | `1` | Playback speed |
+| `direction` | `1 \| -1` | `1` | Playback direction |
+| `backgroundColor` | `string` | `'transparent'` | Background color |
+| `onLoad` | `() => void` | - | Callback when animation loads |
+| `onError` | `(error: Error) => void` | - | Callback on error |
+| `onComplete` | `() => void` | - | Callback when animation completes |
+| `onLoopComplete` | `() => void` | - | Callback when loop completes |
+| `onFrame` | `(frame: number) => void` | - | Callback on each frame |
+
+## License
+
+MIT

package/dist/components/DotLottiePlayer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DotLottiePlayerProps } from '../types';
+export declare const DotLottiePlayer: React.ForwardRefExoticComponent<DotLottiePlayerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/hooks/useDotLottie.d.ts

@@ -0,0 +1,33 @@
+import type { AnimationItem } from 'lottie-web';
+interface UseDotLottieOptions {
+    src: string;
+    loop?: boolean;
+    autoplay?: boolean;
+    speed?: number;
+    direction?: 1 | -1;
+    backgroundColor?: string;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+    onComplete?: () => void;
+    onLoopComplete?: () => void;
+    onFrame?: (frame: number) => void;
+    onEnterFrame?: (frame: number) => void;
+}
+interface UseDotLottieReturn {
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    goToFrame: (frame: number, isFrame?: boolean) => void;
+    setSpeed: (speed: number) => void;
+    setDirection: (direction: 1 | -1) => void;
+    setSubframe: (useSubFrame: boolean) => void;
+    getDuration: (inFrames?: boolean) => number;
+    destroy: () => void;
+    isLoaded: boolean;
+    isPlaying: boolean;
+    currentFrame: number;
+    containerRef: React.RefObject<HTMLDivElement>;
+    animationData: AnimationItem | null;
+}
+export declare function useDotLottie({ src, loop, autoplay, speed, direction, backgroundColor, onLoad, onError, onComplete, onLoopComplete, onFrame, onEnterFrame, }: UseDotLottieOptions): UseDotLottieReturn;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { DotLottiePlayer } from './components/DotLottiePlayer';
+export type { DotLottiePlayerProps } from './types';