React Tools for Socket Studio

Wrap the parts of your app that need Socket Studio access in the provider:

import { createSocketStudioClient, SocketStudioProvider } from '@socket-studio/react';

export function MyAppWrapper({ children }) {
  const url = 'https://api.streamblitz.com/graphql';
  const client = createSocketStudioClient(url);

  return (
    <SocketStudioProvider client={client}>
      {children}
    </SocketStudioProvider>
  )
}

In any component wrapped by the provider, you can access Twitch chat data like so:

import { useTwitchChat } from '@socket-studio/react';

export function MyChat() {
  const twitchChannel = 'jlengstorf';
  const { chat, commands, currentCommand } = useTwitchChat(twitchChannel);

  return (
    <pre>{JSON.stringify({ chat, commands, currentCommand }, null, 2)}</pre>
  )
}