🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

tanstack

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tanstack - npm Package Compare versions

Comparing version
1.0.6
 to
2.0.0
+4
dist/index.d.mts
export { EngineAdapter, EngineAdapterOptions, EventBridgeFn, EventBus, EventBusInterface, EventListener, INITIAL_STATE, PlayerContext, PlayerController, PlayerControllerInterface, PlayerControllerOptions, PlayerEvent, PlayerEventMap, PlayerSource, PlayerState, PluginFactory, PluginRuntime, StateListener, StateStore, StateStoreInterface, TanStackPlugin } from '@tanstack-player/core';
export { VideoJsAdapter, createVideoJsAdapter } from '@tanstack-player/adapter-videojs';
export { TanStackPlayer, TanStackPlayerContext, TanStackPlayerProps, useBookmarks, usePlayerContext, useProgress, useTanStackPlayer } from '@tanstack-player/react';
export { Bookmark, BookmarkEvent, BookmarkPlugin, createBookmarkPlugin } from '@tanstack-player/plugin-bookmark';
+4
dist/index.d.ts
export { EngineAdapter, EngineAdapterOptions, EventBridgeFn, EventBus, EventBusInterface, EventListener, INITIAL_STATE, PlayerContext, PlayerController, PlayerControllerInterface, PlayerControllerOptions, PlayerEvent, PlayerEventMap, PlayerSource, PlayerState, PluginFactory, PluginRuntime, StateListener, StateStore, StateStoreInterface, TanStackPlugin } from '@tanstack-player/core';
export { VideoJsAdapter, createVideoJsAdapter } from '@tanstack-player/adapter-videojs';
export { TanStackPlayer, TanStackPlayerContext, TanStackPlayerProps, useBookmarks, usePlayerContext, useProgress, useTanStackPlayer } from '@tanstack-player/react';
export { Bookmark, BookmarkEvent, BookmarkPlugin, createBookmarkPlugin } from '@tanstack-player/plugin-bookmark';
+79
dist/index.js
'use strict';
var core = require('@tanstack-player/core');
var adapterVideojs = require('@tanstack-player/adapter-videojs');
var react = require('@tanstack-player/react');
var pluginBookmark = require('@tanstack-player/plugin-bookmark');
Object.defineProperty(exports, "EventBus", {
enumerable: true,
get: function () { return core.EventBus; }
});
Object.defineProperty(exports, "INITIAL_STATE", {
enumerable: true,
get: function () { return core.INITIAL_STATE; }
});
Object.defineProperty(exports, "PlayerController", {
enumerable: true,
get: function () { return core.PlayerController; }
});
Object.defineProperty(exports, "PlayerEvent", {
enumerable: true,
get: function () { return core.PlayerEvent; }
});
Object.defineProperty(exports, "PluginRuntime", {
enumerable: true,
get: function () { return core.PluginRuntime; }
});
Object.defineProperty(exports, "StateStore", {
enumerable: true,
get: function () { return core.StateStore; }
});
Object.defineProperty(exports, "VideoJsAdapter", {
enumerable: true,
get: function () { return adapterVideojs.VideoJsAdapter; }
});
Object.defineProperty(exports, "createVideoJsAdapter", {
enumerable: true,
get: function () { return adapterVideojs.createVideoJsAdapter; }
});
Object.defineProperty(exports, "TanStackPlayer", {
enumerable: true,
get: function () { return react.TanStackPlayer; }
});
Object.defineProperty(exports, "TanStackPlayerContext", {
enumerable: true,
get: function () { return react.TanStackPlayerContext; }
});
Object.defineProperty(exports, "useBookmarks", {
enumerable: true,
get: function () { return react.useBookmarks; }
});
Object.defineProperty(exports, "usePlayerContext", {
enumerable: true,
get: function () { return react.usePlayerContext; }
});
Object.defineProperty(exports, "useProgress", {
enumerable: true,
get: function () { return react.useProgress; }
});
Object.defineProperty(exports, "useTanStackPlayer", {
enumerable: true,
get: function () { return react.useTanStackPlayer; }
});
Object.defineProperty(exports, "BookmarkEvent", {
enumerable: true,
get: function () { return pluginBookmark.BookmarkEvent; }
});
Object.defineProperty(exports, "BookmarkPlugin", {
enumerable: true,
get: function () { return pluginBookmark.BookmarkPlugin; }
});
Object.defineProperty(exports, "createBookmarkPlugin", {
enumerable: true,
get: function () { return pluginBookmark.createBookmarkPlugin; }
});
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map
+1
dist/index.js.map
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
+6
dist/index.mjs
export { EventBus, INITIAL_STATE, PlayerController, PlayerEvent, PluginRuntime, StateStore } from '@tanstack-player/core';
export { VideoJsAdapter, createVideoJsAdapter } from '@tanstack-player/adapter-videojs';
export { TanStackPlayer, TanStackPlayerContext, useBookmarks, usePlayerContext, useProgress, useTanStackPlayer } from '@tanstack-player/react';
export { BookmarkEvent, BookmarkPlugin, createBookmarkPlugin } from '@tanstack-player/plugin-bookmark';
//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map
+1
dist/index.mjs.map
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs","sourcesContent":[]}
+21
LICENSE
MIT License
Copyright (c) 2026-present TanStack Player Contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+33
packages/adapter-videojs/package.json
{
"name": "@tanstack-player/adapter-videojs",
"version": "0.1.0",
"description": "TanStack Player — Video.js adapter",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch"
},
"sideEffects": false,
"license": "MIT",
"dependencies": {
"@tanstack-player/core": "*"
},
"peerDependencies": {
"video.js": ">=7.0.0"
},
"devDependencies": {
"tsup": "^8.0.0",
"typescript": "^5.4.0",
"video.js": "^8.0.0"
}
}
+26
packages/core/package.json
{
"name": "@tanstack-player/core",
"version": "0.1.0",
"description": "TanStack Player — Headless core engine",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch"
},
"sideEffects": false,
"license": "MIT",
"devDependencies": {
"tsup": "^8.0.0",
"typescript": "^5.4.0"
}
}
+29
packages/plugin-bookmark/package.json
{
"name": "@tanstack-player/plugin-bookmark",
"version": "0.1.0",
"description": "TanStack Player — Bookmark plugin",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch"
},
"sideEffects": false,
"license": "MIT",
"dependencies": {
"@tanstack-player/core": "*"
},
"devDependencies": {
"tsup": "^8.0.0",
"typescript": "^5.4.0"
}
}
+40
packages/react/package.json
{
"name": "@tanstack-player/react",
"version": "0.1.0",
"description": "TanStack Player — React component and hooks",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch"
},
"sideEffects": false,
"license": "MIT",
"dependencies": {
"@tanstack-player/core": "*",
"@tanstack-player/adapter-videojs": "*"
},
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0",
"video.js": ">=7.0.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"tsup": "^8.0.0",
"typescript": "^5.4.0",
"video.js": "^8.0.0"
}
}
+71
-18
package.json
{
"name": "tanstack",
"version": "1.0.6",
"description": "194+ free online tools & converters — image, PDF, video, SEO, and developer workflows. Powered by 30tools.com",
"main": "index.js",
"version": "2.0.0",
"description": "TanStack Player — A developer-first, universal Video Player SDK built on Video.js with headless hooks, plugin architecture, and React-first DX",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"files": [
"dist",
"packages/*/dist",
"packages/*/package.json",
"README.md",
"LICENSE"
],
"workspaces": [
"packages/*",
"examples/*"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"build": "npm run build --workspaces --if-present && tsup",
"build:packages": "npm run build --workspaces --if-present",
"build:root": "tsup",
"dev": "npm run dev --workspace=examples/react-basic",
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs",
"clean": "rm -rf dist packages/*/dist examples/*/dist",
"prepublishOnly": "npm run build"
},
"keywords": [
"tools",
"online-tools",
"image-compressor",
"pdf-merger",
"video-downloader",
"seo-tools",
"developer-tools",
"converters",
"utilities",
"30tools"
"tanstack",
"video",
"player",
"video-player",
"videojs",
"video.js",
"react",
"hooks",
"headless",
"plugin",
"streaming",
"hls",
"sdk",
"media",
"playback"
],
"author": "30tools",
"author": "sh20raj",
"license": "MIT",
"homepage": "https://30tools.com",
"repository": {
"type": "git",
"url": "https://30tools.com"
"url": "https://github.com/sh20raj/tanstack"
},
"homepage": "https://sh20raj.github.io/tanstack",
"bugs": {
"url": "https://30tools.com"
"url": "https://github.com/sh20raj/tanstack/issues"
},
"dependencies": {
"@tanstack-player/core": "*",
"@tanstack-player/adapter-videojs": "*",
"@tanstack-player/react": "*",
"@tanstack-player/plugin-bookmark": "*"
},
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0",
"video.js": ">=7.0.0"
},
"peerDependenciesMeta": {
"react": { "optional": true },
"react-dom": { "optional": true }
},
"devDependencies": {
"tsup": "^8.0.0",
"typescript": "^5.4.0",
"vitepress": "^1.5.0"
}
}
+233
-37
README.md

@@ -1,67 +0,263 @@

# 🔧 thirty-tools
<div align="center">
### All Your Tools. One Platform.
# ▶ TanStack Player
Compress images, edit PDFs, download videos, and more. **194+ free, private, and browser-based tools** — all in one place.
**A developer-first, universal Video Player SDK built on Video.js**
👉 **[Visit 30tools.com](https://30tools.com)**
Headless hooks · Plugin architecture · React-first DX · Streaming ready
[![npm version](https://img.shields.io/npm/v/tanstack?style=flat-square&color=6c5ce7)](https://www.npmjs.com/package/tanstack)
[![npm downloads](https://img.shields.io/npm/dm/tanstack?style=flat-square&color=00d2ff)](https://www.npmjs.com/package/tanstack)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/tanstack?style=flat-square&color=00e676&label=gzip)](https://bundlephobia.com/package/tanstack)
[![license](https://img.shields.io/npm/l/tanstack?style=flat-square&color=00d2ff)](LICENSE)
[![GitHub stars](https://img.shields.io/github/stars/sh20raj/tanstack?style=flat-square)](https://github.com/sh20raj/tanstack)
[![GitHub issues](https://img.shields.io/github/issues/sh20raj/tanstack?style=flat-square)](https://github.com/sh20raj/tanstack/issues)
[![GitHub pull requests](https://img.shields.io/github/issues-pr/sh20raj/tanstack?style=flat-square)](https://github.com/sh20raj/tanstack/pulls)
[![TypeScript](https://img.shields.io/badge/TypeScript-first-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Video.js](https://img.shields.io/badge/Video.js-powered-green?style=flat-square)](https://videojs.com/)
[![Visitors](https://api.visitorbadge.io/api/combined?path=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Ftanstack%3FactiveTab%3Dreadme&countColor=%23263759&style=flat&labelStyle=upper)](https://visitorbadge.io/status?path=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Ftanstack%3FactiveTab%3Dreadme)
[Documentation](https://sh20raj.github.io/tanstack) · [npm](https://www.npmjs.com/package/tanstack) · [Examples](https://github.com/sh20raj/tanstack/tree/main/examples) · [Contributing](CONTRIBUTING.md)
</div>
---
## 🚀 Explore Categories
## ✨ Why TanStack Player?
| Category | Description |
|---|---|
| 🖼️ **[Image Tools](https://30tools.com/search?category=image)** | Compress, convert, resize, and edit images online |
| 📄 **[PDF Tools](https://30tools.com/search?category=pdf)** | Merge, split, compress, and manipulate PDF documents |
| 🎬 **[Video Tools](https://30tools.com/search?category=video)** | Compress videos, convert formats, and create GIFs |
| 📱 **[Social Media Downloaders](https://30tools.com/search?category=downloaders)** | Download videos, photos, and content from all platforms |
| 🎵 **[Audio Tools](https://30tools.com/search?category=audio)** | Compress and convert audio files between formats |
| 🛠️ **[Utility Tools](https://30tools.com/search?category=utilities)** | Convert units, create ZIP files, and essential utilities |
| 💻 **[Developer Tools](https://30tools.com/search?category=developer)** | Format JSON, generate hashes, and developer utilities |
| 🎨 **[Fun Generators](https://30tools.com/search?category=generators)** | Create viral content with AI-powered fun generators |
| 📊 **[SEO Tools](https://30tools.com/search?category=seo)** | Keyword research, rank tracking, technical SEO & more |
Building video experiences is hard — buffering, streaming formats, browser quirks, accessibility, and state management all add complexity. TanStack Player abstracts all of this behind a clean, modern SDK:
| Feature | Description |
|---------|-------------|
| 🎬 **Headless Core** | Framework-agnostic engine with play/pause/seek/volume/speed |
| 🪝 **React Hooks** | `useTanStackPlayer()`, `useProgress()`, `useBookmarks()` |
| 🔌 **Plugin System** | Lifecycle-aware plugins with event bus access |
| 📡 **Streaming** | HLS, DASH, adaptive bitrate via Video.js |
| ⚡ **Tiny** | ~21KB total SDK (ESM, gzipped much smaller) |
| 🎯 **TypeScript** | Full typed API with JSDoc |
---
## ✨ Why 30tools?
## 📦 Installation
### 🔒 Private by Design
Files never leave your browser for most tools. Server-side processing deletes files immediately.
```bash
npm install tanstack video.js
```
### ⚡ No Waiting
Instant processing. No queues, no countdown timers, no "premium speed" gates.
> **Note:** `video.js` is a peer dependency. Load it via CDN or bundle it.
### 🎯 Professional Mode
Advanced settings for power users. Tweak compression ratios, formats, and more.
---
## 🚀 Quick Start
```tsx
import { TanStackPlayer } from 'tanstack'
export default function App() {
return (
<TanStackPlayer
src="https://example.com/video.mp4"
controls
autoPlay={false}
/>
)
}
```
---
## 🌍 Keep the Internet Free
## 🪝 Hooks API
30tools serves millions of students and creators for free. No ads, no paywalls.
Build completely custom UI with headless hooks:
**[☕ Donate to Support](https://payments.cashfree.com/forms/30tools)** — Every donation goes directly to server costs and coffee ☕️
```tsx
import { useTanStackPlayer, useProgress } from 'tanstack'
function Controls() {
const { play, pause, isPlaying, seek, setVolume } = useTanStackPlayer()
const { progress, buffered, currentTime, duration } = useProgress()
return (
<div>
<button onClick={() => isPlaying ? pause() : play()}>
{isPlaying ? '⏸' : '▶'}
</button>
<div>Progress: {progress.toFixed(1)}%</div>
</div>
)
}
```
---
## 📦 Installation
## 🔌 Plugin System
Extend player capabilities with plugins:
```tsx
import { TanStackPlayer, createBookmarkPlugin } from 'tanstack'
const bookmarks = createBookmarkPlugin()
function App() {
return (
<TanStackPlayer
src="/video.mp4"
plugins={[bookmarks]}
>
<BookmarkControls />
</TanStackPlayer>
)
}
```
### Using Bookmark Hooks
```tsx
import { useBookmarks } from 'tanstack'
function BookmarkControls() {
const { bookmarks, addBookmark, seekToBookmark } = useBookmarks()
return (
<div>
<button onClick={() => addBookmark('Important moment')}>
🔖 Bookmark
</button>
{bookmarks.map(bm => (
<button key={bm.id} onClick={() => seekToBookmark(bm.id)}>
{bm.label} ({bm.time}s)
</button>
))}
</div>
)
}
```
---
## 📦 Packages
| Package | Size | Description |
|---------|------|-------------|
| `tanstack` | — | All-in-one package (re-exports everything) |
| `@tanstack-player/core` | 8.7KB | Headless event bus, state store, controller, plugin runtime |
| `@tanstack-player/adapter-videojs` | 4.6KB | Video.js engine adapter |
| `@tanstack-player/react` | 6.2KB | React component + hooks |
| `@tanstack-player/plugin-bookmark` | 1.6KB | Bookmark plugin |
---
## 🏗 Architecture
```
TanStack Player
├─ Core (headless)
│ ├── EventBus — typed event emitter
│ ├── StateStore — reactive state management
│ ├── PlayerController — unified playback API
│ └── PluginRuntime — plugin lifecycle manager
│
├─ Adapters
│ └── VideoJsAdapter — Video.js ↔ Core bridge
│
├─ React
│ ├── <TanStackPlayer /> — component
│ ├── useTanStackPlayer — control hook
│ ├── useProgress — progress hook
│ └── useBookmarks — bookmark plugin hook
│
└─ Plugins
└── BookmarkPlugin — timestamp bookmarks
```
---
## ⚙️ Video.js Options
Pass native Video.js configuration through:
```tsx
<TanStackPlayer
src="/video.mp4"
videojsOptions={{
fluid: true,
preload: 'auto',
playbackRates: [0.5, 1, 1.5, 2],
}}
/>
```
---
## 🎯 Events
Unified event system across all adapters:
```tsx
<TanStackPlayer
src="/video.mp4"
onReady={() => console.log('Ready!')}
onPlay={() => console.log('Playing')}
onPause={() => console.log('Paused')}
onEnded={() => console.log('Ended')}
onTimeUpdate={(time, duration) => console.log(`${time}/${duration}`)}
onError={(err) => console.error(err)}
/>
```
---
## 🛠 Development
```bash
npm install thirty-tools
git clone https://github.com/sh20raj/tanstack
cd tanstack
npm install
npm run build
npm run dev
```
## 🔗 Quick Links
See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
- 🌐 **Website**: [30tools.com](https://30tools.com)
- 🔍 **Search Tools**: [30tools.com/search](https://30tools.com/search)
- 🖼️ **Image Compressor**: [30tools.com/search?q=image+compressor](https://30tools.com/search?q=image%20compressor)
- 📹 **Video Downloader**: [30tools.com/search?q=video+downloader](https://30tools.com/search?q=video%20downloader)
- 📄 **PDF Merger**: [30tools.com/search?q=pdf+merger](https://30tools.com/search?q=pdf%20merger)
- 🔑 **Password Generator**: [30tools.com/search?q=password+generator](https://30tools.com/search?q=password%20generator)
---
## 🛣 Roadmap
- [ ] HLS.js adapter
- [ ] Plyr lightweight adapter
- [ ] Analytics plugin
- [ ] Floating mini-player plugin
- [ ] Subtitle editor plugin
- [ ] AI chapter detection plugin
- [ ] React Native support
---
## License
## 🧰 Recommended Tools
MIT © [30tools](https://30tools.com)
Looking for developer utilities to use alongside TanStack Player? Check out **[30tools.com](https://30tools.com)** — a suite of **194+ free, privacy-first online tools** for developers:
- **JSON Formatter & Diff Viewer** — perfect for debugging API responses
- **Image Compressor & Converter** — optimize video thumbnails and posters
- **JWT Decoder** — inspect auth tokens for protected video content
- **CSS Gradient Generator** — create beautiful player UI gradients
- **Base64 ↔ Image** — handle inline poster images
All tools run directly in your browser for maximum privacy. No uploads, no tracking.
👉 **[30tools.com](https://30tools.com)** — One platform, every tool you need.
---
## 📄 License
[MIT](LICENSE) — Made with ❤️ by [@sh20raj](https://github.com/sh20raj)
---
<div align="center">
**[⭐ Star on GitHub](https://github.com/sh20raj/tanstack)** — it helps a lot!
</div>
-33
index.js
/**
* thirty-tools
*
* 194+ Free Online Tools & Converters
* https://30tools.com
*
* Compress images, edit PDFs, download videos, and more.
* 100% free, private, and browser-based.
*/
module.exports = {
name: "thirty-tools",
version: "1.0.0",
url: "https://30tools.com",
description: "194+ free online tools & converters for image, PDF, video, SEO, and developer workflows.",
categories: [
"Image Tools",
"PDF Tools",
"Video Tools",
"Social Media Downloaders",
"Audio Tools",
"Utility Tools",
"Developer Tools",
"Fun Generators",
"SEO Tools"
],
visit: function () {
console.log("\n🔧 thirty-tools — All Your Tools. One Platform.");
console.log(" https://30tools.com\n");
console.log(" 194+ free online tools for image, PDF, video, SEO & developer workflows.");
console.log(" 100% free • Private by design • No waiting\n");
}
};