Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@reelkit/react-reel-player

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reelkit/react-reel-player - npm Package Compare versions

Comparing version
0.1.1
 to
0.1.2
+3
-1
package.json
{
"name": "@reelkit/react-reel-player",
"version": "0.1.1",
"version": "0.1.2",
"type": "module",

@@ -22,2 +22,4 @@ "sideEffects": [

"dist",
"!dist/package.json",
"!dist/README.md",
"!**/*.tsbuildinfo"

@@ -24,0 +26,0 @@ ],

-22
dist/CHANGELOG.md
## 0.1.0 (2026-03-13)
### 🚀 Features
- video lightbox hook, animated logo, CI/lint/typecheck fixes, funding, and docs overhaul ([29238e5](https://github.com/KonstantinKai/reelkit/commit/29238e5))
- add auto-size mode, signal-based resize, lightbox fixes, and docs updates ([55a75e0](https://github.com/KonstantinKai/reelkit/commit/55a75e0))
- restructure docs site and add rk- CSS class prefix ([162d9b8](https://github.com/KonstantinKai/reelkit/commit/162d9b8))
- add lightbox customization, reel player improvements, docs overhaul, and JSDoc ([4c464d3](https://github.com/KonstantinKai/reelkit/commit/4c464d3))
- add lightbox, reel player packages, e2e tests, and docs ([ef5c939](https://github.com/KonstantinKai/reelkit/commit/ef5c939))
### 🩹 Fixes
- correct release manifest paths and docs deploy trigger ([d402dea](https://github.com/KonstantinKai/reelkit/commit/d402dea))
### 🧱 Updated Dependencies
- Updated @reelkit/react to 0.1.0
- Updated @reelkit/core to 0.1.0
### ❤️ Thank You
- KonstantinKai @KonstantinKai
-60
dist/package.json
{
"name": "@reelkit/react-reel-player",
"version": "0.1.1",
"type": "module",
"sideEffects": [
"*.css"
],
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
"./package.json": "./package.json",
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"default": "./dist/index.js"
},
"./styles.css": "./dist/index.css"
},
"files": [
"dist",
"!**/*.tsbuildinfo"
],
"repository": {
"type": "git",
"url": "https://github.com/KonstantinKai/reelkit.git",
"directory": "packages/reelkit-react-reel-player"
},
"bugs": "https://github.com/KonstantinKai/reelkit/issues",
"homepage": "https://reelkit.dev/docs/reel-player",
"funding": {
"type": "buymeacoffee",
"url": "https://buymeacoffee.com/konstantinkai"
},
"description": "Full-screen vertical-swipe video/image reel player for React, inspired by Instagram Reels and TikTok",
"license": "MIT",
"keywords": [
"react",
"video-player",
"reel-player",
"tiktok",
"instagram-reels",
"fullscreen",
"swipe",
"vertical-video",
"overlay",
"react-component",
"typescript"
],
"publishConfig": {
"access": "public"
},
"peerDependencies": {
"@reelkit/core": "*",
"@reelkit/react": "*",
"react": ">=18",
"react-dom": ">=18",
"lucide-react": ">=0.400.0"
}
}
-244
dist/README.md
# @reelkit/react-reel-player
<p>
<a href="https://www.npmjs.com/package/@reelkit/react-reel-player"><img src="https://img.shields.io/npm/v/@reelkit/react-reel-player?color=6366f1&label=npm" alt="npm" /></a>
<img src="https://img.shields.io/bundlephobia/minzip/@reelkit/react-reel-player?color=6366f1" alt="Bundle size" />
<a href="https://github.com/KonstantinKai/reelkit"><img src="https://img.shields.io/github/stars/KonstantinKai/reelkit?style=social" alt="Star on GitHub" /></a>
</p>
Full-screen vertical-swipe video/image player for React. Inspired by Instagram Reels and TikTok.
## Installation
```bash
npm install @reelkit/react-reel-player @reelkit/react lucide-react
```
## Quick Start
```tsx
import {
ReelPlayerOverlay,
type ContentItem,
} from '@reelkit/react-reel-player';
import '@reelkit/react-reel-player/styles.css';
const content: ContentItem[] = [
{
id: '1',
media: [
{
id: 'v1',
type: 'video',
src: 'https://example.com/video.mp4',
poster: 'https://example.com/poster.jpg',
aspectRatio: 9 / 16,
},
],
author: { name: 'John Doe', avatar: 'https://example.com/avatar.jpg' },
likes: 1234,
description: 'Amazing video!',
},
];
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button onClick={() => setIsOpen(true)}>Open Player</button>
<ReelPlayerOverlay
isOpen={isOpen}
onClose={() => setIsOpen(false)}
content={content}
/>
</>
);
}
```
## Features
- Vertical swipe navigation (touch, mouse, keyboard, wheel)
- Video autoplay with sound toggle
- Multi-media posts with horizontal nested slider
- Instagram-style indicator dots
- Keyboard navigation (Arrow keys, Escape)
- Desktop navigation arrows
- iOS sound continuity
- Video position memory
## API Reference
### ReelPlayerOverlay
| Prop | Type | Default | Description |
| --------------------- | --------------------------- | -------- | ----------------------------- |
| `isOpen` | `boolean` | required | Controls overlay visibility |
| `onClose` | `() => void` | required | Called when player closes |
| `content` | `ContentItem[]` | required | Content items to display |
| `initialIndex` | `number` | `0` | Starting slide index |
| `onSlideChange` | `(index: number) => void` | - | Callback after slide change |
| `apiRef` | `MutableRefObject<ReelApi>` | - | Ref to access Reel API |
| `loop` | `boolean` | `false` | Enable infinite loop |
| `useNavKeys` | `boolean` | `true` | Enable keyboard navigation |
| `enableWheel` | `boolean` | `true` | Enable mouse wheel navigation |
| `wheelDebounceMs` | `number` | `200` | Wheel debounce duration (ms) |
| `transitionDuration` | `number` | `300` | Transition duration (ms) |
| `swipeDistanceFactor` | `number` | `0.12` | Swipe threshold (0-1) |
### Types
```tsx
interface ContentItem {
id: string;
media: MediaItem[];
author: {
name: string;
avatar: string;
};
likes: number;
description: string;
}
interface MediaItem {
id: string;
type: 'image' | 'video';
src: string;
poster?: string;
aspectRatio: number; // width / height
}
type MediaType = 'image' | 'video';
```
### Sound Context
```tsx
import { SoundProvider, useSoundState } from '@reelkit/react-reel-player';
interface SoundState {
muted: boolean;
disabled: boolean;
toggle: () => void;
setMuted: (value: boolean) => void;
setDisabled: (value: boolean) => void;
}
```
### Re-exports from @reelkit/react
```tsx
import {
Reel,
ReelIndicator,
type ReelProps,
type ReelApi,
type ReelIndicatorProps,
} from '@reelkit/react-reel-player';
```
## Examples
### Single Video
```tsx
{
id: '1',
media: [{
id: 'v1',
type: 'video',
src: 'https://example.com/video.mp4',
poster: 'https://example.com/thumb.jpg',
aspectRatio: 9 / 16,
}],
author: { name: 'Creator', avatar: '...' },
likes: 5000,
description: 'Check this out!',
}
```
### Multi-Media Post
```tsx
{
id: '2',
media: [
{ id: 'img1', type: 'image', src: '...', aspectRatio: 4 / 5 },
{ id: 'v1', type: 'video', src: '...', poster: '...', aspectRatio: 9 / 16 },
{ id: 'img2', type: 'image', src: '...', aspectRatio: 1 },
],
author: { name: 'Blogger', avatar: '...' },
likes: 10000,
description: 'My trip',
}
```
### Gallery with Index
```tsx
function Gallery() {
const [isOpen, setIsOpen] = useState(false);
const [index, setIndex] = useState(0);
const open = (i: number) => {
setIndex(i);
setIsOpen(true);
};
return (
<>
{content.map((item, i) => (
<div key={item.id} onClick={() => open(i)}>
<img src={item.media[0].poster || item.media[0].src} />
</div>
))}
<ReelPlayerOverlay
isOpen={isOpen}
onClose={() => setIsOpen(false)}
content={content}
initialIndex={index}
/>
</>
);
}
```
## Keyboard Shortcuts
| Key | Action |
| ------------ | ----------------------- |
| `ArrowUp` | Previous slide |
| `ArrowDown` | Next slide |
| `ArrowLeft` | Previous media (nested) |
| `ArrowRight` | Next media (nested) |
| `Escape` | Close player |
## CSS Classes
```css
.rk-reel-overlay {
} /* Overlay background */
.rk-reel-container {
} /* Player container */
.rk-player-nav-arrows {
} /* Desktop nav arrows */
.rk-player-close-btn {
} /* Close button */
.rk-player-sound-btn {
} /* Sound toggle */
.rk-video-slide-container {
}
.rk-video-slide-loader {
}
.rk-video-slide-poster {
}
```
## Documentation
Full documentation, interactive demos, and customization examples at **[reelkit.dev/docs/reel-player](https://reelkit.dev/docs/reel-player)**.
## License
[MIT](LICENSE)