Docs/Client SDKs/React SDK

React SDK

@emitwave/react — subscribe to real-time channels with hooks.

Client SDK· 4 min read

Install

bash

npm install @emitwave/react @emitwave/js react

Thin wrapper over @emitwave/js. Use your application's public key — never a server credential secret in client code.

Provider

Wrap your tree in EmitwaveProvider. It creates one client and connects it on mount.

App.tsx

import { EmitwaveProvider } from '@emitwave/react'

export function App() {
  return (
    <EmitwaveProvider appKey="ew_pk_live_your_public_key">
      <Dashboard />
    </EmitwaveProvider>
  )
}

Connection state

Status.tsx

import { useConnection } from '@emitwave/react'

function Status() {
  const state = useConnection()  // connecting | connected | disconnected | error
  return <span>{state}</span>
}

useChannel

Subscribe to a channel and track the latest payload for an event.

Orders.tsx

import { useChannel } from '@emitwave/react'

function Orders() {
  const { data, channel, error } = useChannel('orders', 'order.created')
  if (error) return <p>{error.message}</p>
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

useEvent

Subscribe to a channel and track the most recent event of any name.

Feed.tsx

import { useEvent } from '@emitwave/react'

function Feed() {
  const { last } = useEvent('orders')  // latest event of any name
  return <pre>{JSON.stringify(last, null, 2)}</pre>
}

usePresence

Track the members of a presence channel.

Online.tsx

import { usePresence } from '@emitwave/react'

function Online() {
  const { members, count } = usePresence('presence-room-1')
  return <p>{count} online</p>
}

Each hook subscribes on mount and unsubscribes on unmount; a channel-auth error surfaces as error.

← Previous

JavaScript

Next.js