{"_id":"@abhishekkashyap2698/tarang-react","_rev":"2-d96002c48132a7259884b384b1e85408","name":"@abhishekkashyap2698/tarang-react","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@abhishekkashyap2698/tarang-react","version":"1.0.0","keywords":["tarang","react","hooks","realtime"],"author":{"name":"Tarang Contributors"},"license":"MIT","_id":"@abhishekkashyap2698/tarang-react@1.0.0","maintainers":[{"name":"abhishekkashyap260398","email":"abhishek61010@gmail.com"}],"dist":{"shasum":"2979f3a81402579f58758f510269673fff380d3a","tarball":"https://registry.npmjs.org/@abhishekkashyap2698/tarang-react/-/tarang-react-1.0.0.tgz","fileCount":7,"integrity":"sha512-1drywRmEwRi6Ry41HSPawfOeVn+1tiQrMzZT4YKXO8wC7gMhCfXaLSm568rxrsOFvqrf2DIH3tE78dOLA9AOwg==","signatures":[{"sig":"MEUCICWfvDQ7DaABKrLA1+QLHhY0fcfVEHaj0SALfllVgCbXAiEA9z0eUIvlMsxl+erhJ12dHtTgGn0UgD7ySxKOhsW3AyA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19569},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"abhishekkashyap260398","email":"abhishek61010@gmail.com"},"_npmVersion":"10.8.2","description":"React hooks and provider for Tarang SDK","directories":{},"_nodeVersion":"20.20.0","dependencies":{"@abhishekkashyap2698/tarang-core":"^1.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/tarang-react_1.0.0_1788667781345_0.11379580198089223","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@abhishekkashyap2698/tarang-react","version":"1.0.1","description":"React hooks and provider for Tarang SDK","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"scripts":{"build":"tsup","dev":"tsup --watch"},"dependencies":{"@abhishekkashyap2698/tarang-core":"^1.0.0"},"peerDependencies":{"react":">=16.8.0"},"keywords":["tarang","react","hooks","realtime"],"author":{"name":"Tarang Contributors"},"license":"MIT","_id":"@abhishekkashyap2698/tarang-react@1.0.1","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-xDNPWdsLtvdx+5WPHmMf1gLzMib9PspK8ij/o3mW0EUWiQFoBGQxE30SpprlkGbDIldlMSLbgTMDOvoujBvAiQ==","shasum":"70a51cbb646d5d671c70a45ff25ee1bd631acc53","tarball":"https://registry.npmjs.org/@abhishekkashyap2698/tarang-react/-/tarang-react-1.0.1.tgz","fileCount":8,"unpackedSize":27992,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCOoOU1RDAh5wGqF0f6ZgW0oHu22ZI6PKIR31/sw+crUQIhANTG77mvspiKeqYRg8GJVH9Q/yLROrOqvZbCF/S9PSsq"}]},"_npmUser":{"name":"abhishekkashyap260398","email":"abhishek61010@gmail.com"},"directories":{},"maintainers":[{"name":"abhishekkashyap260398","email":"abhishek61010@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tarang-react_1.0.1_1788669336623_0.6708536938786984"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-06T04:09:41.162Z","modified":"2026-09-06T04:35:36.913Z","1.0.0":"2026-09-06T04:09:41.478Z","1.0.1":"2026-09-06T04:35:36.757Z"},"author":{"name":"Tarang Contributors"},"license":"MIT","keywords":["tarang","react","hooks","realtime"],"description":"React hooks and provider for Tarang SDK","maintainers":[{"name":"abhishekkashyap260398","email":"abhishek61010@gmail.com"}],"readme":"# ⚡ Tarang SDK (`@abhishekkashyap2698/tarang`)\n\n> **Production-ready, lightweight, transport-agnostic real-time JavaScript/TypeScript SDK** with built-in React hooks, React Native, WebRTC DataChannel, WebSocket, and custom transport adapters.\n\n[![npm version](https://img.shields.io/npm/v/@abhishekkashyap2698/tarang.svg)](https://www.npmjs.com/package/@abhishekkashyap2698/tarang)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n---\n\n## 🌟 Key Highlights\n\n- **📦 Single All-In-One Package**: Install `@abhishekkashyap2698/tarang` for React, Node.js, React Native, TypeScript, or Vanilla JS.\n- **🔌 Universal Transport Agnostic**: Switch effortlessly between **WebSocket**, **WebRTC DataChannels**, **Mock** (for offline testing), or **Custom Transports** (Socket.IO, Supabase, MQTT, etc.).\n- **⚡ Zero Backend & Zero STUN/TURN Lock-in**: Works out of the box with your existing endpoints without forcing proprietary backends or third-party STUN/TURN servers.\n- **🔄 Auto Reconnect & Offline Queue**: Automatic reconnection with exponential backoff & full jitter, plus bounded offline message buffers.\n- **💓 Built-in Heartbeat & RPC**: Keep-alive ping/pong detection and typed request-response RPC with configurable timeouts.\n- **⚛️ First-Class React Integration**: Built-in `<TarangProvider>`, `useTarang()`, `useTarangEvent()`, `useTarangStatus()`, and `useTarangRequest()`.\n\n---\n\n## 📥 Installation\n\n```bash\nnpm install @abhishekkashyap2698/tarang\n```\n\n*(Optional: If you use yarn or pnpm)*\n```bash\nyarn add @abhishekkashyap2698/tarang\n# or\npnpm add @abhishekkashyap2698/tarang\n```\n\n---\n\n## 🚀 Quick Start Guide\n\n### 1. ⚛️ React Integration (Standard)\n\n```tsx\nimport React, { useState } from \"react\";\nimport {\n  createTarang,\n  TarangProvider,\n  useTarang,\n  useTarangEvent,\n  useTarangStatus\n} from \"@abhishekkashyap2698/tarang\";\n\n// 1. Create client instance\nconst tarang = createTarang({\n  transport: \"websocket\",\n  url: \"wss://echo.websocket.events\", // or your WebSocket URL\n  reconnect: {\n    enabled: true,\n    maxRetries: 10,\n    initialDelay: 1000,\n    maxDelay: 30000,\n    backoff: \"exponential\",\n    jitter: true\n  },\n  queue: {\n    enabled: true,\n    maxSize: 100\n  },\n  heartbeat: {\n    enabled: true,\n    interval: 30000,\n    timeout: 10000\n  }\n});\n\n// 2. Component using hooks\nfunction ChatWidget() {\n  const tarang = useTarang();\n  const { state, isConnected } = useTarangStatus();\n  const [messages, setMessages] = useState<string[]>([]);\n  const [input, setInput] = useState(\"\");\n\n  // Listen to incoming real-time events automatically\n  useTarangEvent(\"chat:message\", (data: any) => {\n    setMessages((prev) => [...prev, data.text]);\n  });\n\n  const sendMessage = async () => {\n    if (!input.trim()) return;\n    await tarang.emit(\"chat:message\", { text: input, timestamp: Date.now() });\n    setInput(\"\");\n  };\n\n  return (\n    <div>\n      <div>Status: <strong>{state}</strong> (Connected: {String(isConnected)})</div>\n      <input value={input} onChange={(e) => setInput(e.target.value)} placeholder=\"Type a message...\" />\n      <button onClick={sendMessage}>Send</button>\n      <ul>\n        {messages.map((m, i) => <li key={i}>{m}</li>)}\n      </ul>\n    </div>\n  );\n}\n\n// 3. Wrap with Provider\nexport default function App() {\n  return (\n    <TarangProvider client={tarang}>\n      <ChatWidget />\n    </TarangProvider>\n  );\n}\n```\n\n---\n\n### 2. 🟢 Node.js / Backend & TypeScript\n\n```typescript\nimport { createTarang } from \"@abhishekkashyap2698/tarang\";\n\n// Strongly typed event map\ntype ServerEvents = {\n  \"user:login\": { userId: string; timestamp: number };\n  \"order:created\": { orderId: string; amount: number };\n};\n\nconst tarang = createTarang<ServerEvents>({\n  transport: \"websocket\",\n  url: \"wss://your-realtime-server.com/socket\"\n});\n\n// Connect\nawait tarang.connect();\n\n// Listen\ntarang.on(\"order:created\", (order) => {\n  console.log(`Processing Order ${order.orderId} for $${order.amount}`);\n});\n\n// Emit\nawait tarang.emit(\"user:login\", {\n  userId: \"usr_1029\",\n  timestamp: Date.now()\n});\n\n// RPC Request / Response\nconst result = await tarang.request(\"fetchUserProfile\", { id: \"usr_1029\" }, 5000);\nconsole.log(\"Profile:\", result);\n```\n\n---\n\n### 3. 🌐 WebRTC Peer-to-Peer with Custom Signaling\n\nTarang exposes raw WebRTC DataChannel primitives without hardcoding any STUN/TURN or signaling server:\n\n```typescript\nimport { createTarang } from \"@abhishekkashyap2698/tarang\";\n\nconst tarang = createTarang({\n  transport: \"webrtc\",\n  webrtc: {\n    rtcConfig: {\n      iceServers: [] // Pass your own STUN/TURN if required\n    }\n  }\n});\n\nconst peer = tarang.webrtc!();\n\n// Handle ICE Candidates generated locally\npeer.onIceCandidate((candidate) => {\n  mySignalingChannel.send({ type: \"candidate\", candidate });\n});\n\n// Initiator creates Offer\nconst offer = await peer.createOffer();\nawait mySignalingChannel.send({ type: \"offer\", offer });\n\n// Receiver sets Remote Description and creates Answer\nawait peer.setRemoteDescription(receivedOffer);\nconst answer = await peer.createAnswer();\nawait mySignalingChannel.send({ type: \"answer\", answer });\n\n// Connect & emit over RTCDataChannel\nawait tarang.connect();\nawait tarang.emit(\"p2p:message\", { text: \"Hello peer!\" });\n```\n\n---\n\n### 4. 🛠️ Custom Transport Adapter\n\nWrap any proprietary or custom socket library (Socket.IO, Firebase, Supabase, MQTT, WebTransport):\n\n```typescript\nimport { createTarang, createCustomTransport } from \"@abhishekkashyap2698/tarang\";\n\nconst customTransport = createCustomTransport({\n  connect: async () => { /* custom socket connect logic */ },\n  disconnect: async () => { /* custom socket disconnect logic */ },\n  send: (data) => { /* custom socket send logic */ },\n  onMessage: (cb) => { /* wire incoming messages to cb(data) */ },\n  onOpen: (cb) => { /* wire socket open to cb() */ },\n  onClose: (cb) => { /* wire socket close to cb(reason) */ },\n  onError: (cb) => { /* wire socket error to cb(error) */ }\n});\n\nconst tarang = createTarang({\n  transport: customTransport\n});\n```\n\n---\n\n### 5. 🧪 Offline Testing Without Any Backend (`MockTransport`)\n\nTest and build your entire UI offline with zero backend:\n\n```typescript\nimport { createTarang, MockTransport } from \"@abhishekkashyap2698/tarang\";\n\nconst mock = new MockTransport({ autoOpen: true });\nconst tarang = createTarang({ transport: mock });\n\nawait tarang.connect();\n\ntarang.on(\"test:event\", (data) => {\n  console.log(\"Mock event received:\", data);\n});\n\n// Simulate an incoming wire frame\nmock.simulateMessage(JSON.stringify({\n  id: \"test-1\",\n  type: \"event\",\n  event: \"test:event\",\n  payload: { hello: \"offline test\" },\n  timestamp: Date.now()\n}));\n```\n\n---\n\n## 📖 API Reference\n\n### Tarang Client\n- `await tarang.connect()`: Connect to endpoint.\n- `await tarang.disconnect()`: Gracefully disconnect.\n- `await tarang.reconnect()`: Immediately trigger reconnection.\n- `await tarang.emit(event, payload)`: Emit an event (auto-queued if offline).\n- `tarang.on(event, handler)`: Register event listener (returns `unsubscribe` function).\n- `tarang.once(event, handler)`: Register one-time event listener.\n- `tarang.off(event, handler)`: Unregister event listener.\n- `await tarang.request(method, params, timeoutMs)`: Perform RPC request with timeout.\n- `tarang.isConnected()`: Check if active.\n- `tarang.getState()`: Returns `\"idle\" | \"connecting\" | \"connected\" | \"reconnecting\" | \"disconnecting\" | \"disconnected\" | \"failed\"`.\n- `tarang.getQueueSize()`, `tarang.clearQueue()`, `tarang.flushQueue()`: Offline buffer tools.\n\n### React Hooks\n- `<TarangProvider client={tarang}>`: React context provider.\n- `useTarang()`: Access Tarang client instance from context.\n- `useTarangEvent(event, handler)`: Auto-managed event subscription with automatic unmount cleanup.\n- `useTarangStatus()`: Returns `{ state, isConnected }` with zero unnecessary re-renders.\n- `useTarangRequest(method)`: Memoized RPC request caller.\n\n---\n\n## 🔒 Security & Reliability\n\n- **Safe Deserialization**: Guarded by `TarangProtocolError` boundaries.\n- **Message Size Limits**: Configurable byte length validation against payload bombing.\n- **Bounded Offline Buffers**: Strict `drop-oldest`, `drop-newest`, or `throw` overflow strategies.\n- **Zero Sensitive Leaks**: Tokens and credentials stripped from error logs.\n\n---\n\n## 📄 License\n\nMIT © [Abhishek Kashyap](https://github.com/abhishekkashyap)\n","readmeFilename":"README.md"}