altohost-react

Official React hooks for AltoHost real-time WebSocket infrastructure.

Install

npm install @girardmedia/altohost-react @girardmedia/altohost-js

Quick Start

import { AltoHostProvider, useChannel, useEvent } from '@girardmedia/altohost-react'

function App() {
  return (
    <AltoHostProvider
      appKey="your-app-key"
      options={{ wsHost: 'ws.altohost.com' }}
    >
      <Chat />
    </AltoHostProvider>
  )
}

function Chat() {
  const [messages, setMessages] = useState([])
  const channel = useChannel('chat-room')

  useEvent(channel, 'new-message', (data) => {
    setMessages((prev) => [...prev, data])
  })

  return <div>{messages.map((m) => <p key={m.id}>{m.text}</p>)}</div>
}

Hooks

useAltoHost()

Access the AltoHost client instance and connection state.

const { client, connectionState, socketId } = useAltoHost()
// connectionState: 'connecting' | 'connected' | 'disconnected' | 'reconnecting'

useChannel(name)

Subscribe to a channel. Automatically unsubscribes on unmount.

const channel = useChannel('my-channel')
// Returns null until subscribed

useEvent(channel, event, callback)

Listen for events on a channel. Callback ref is stable — no stale closures.

const channel = useChannel('notifications')
useEvent(channel, 'new-alert', (data) => {
  showAlert(data.message)
})

usePresence(name)

Subscribe to a presence channel and track members.

const { members, me, count, channel } = usePresence('lobby')
// members: [{ id, info }, ...]
// me: { id, info } | null
// count: number

useTrigger(channel)

Send client events on a private/presence channel.

const channel = useChannel('private-chat')
const trigger = useTrigger(channel)

trigger('typing', { userId: '123', isTyping: true })
// Sends 'client-typing' event

License

MIT