React Channels implementation

useChannelMessage(channelId: string, eventName: string, listener: Function): void

import { useChannelMessage } from "@onehop/react";

const channelId = "group_chat";

export default function MyComponent() {
  const [chatMessages, setChatMessages] = useState([]);

  // in this example, USER_MESSAGE is an event that you'd send to the channel from your backend
  useChannelMessage(channelId, "USER_MESSAGE", (message) => {
    // this will be called every time the USER_MESSAGE event is sent to this channel
    setChatMessages((m) => [...m, message]);
  });

  return (
    <ul>
      {chatMessages.map((m) => (
        <li>
          <b>{m.author}</b>: {m.content}
        </li>
      ))}
    </ul>
  );
}

useReadChannelState(channelId: string): ChannelStateData

import { useReadChannelState } from "@onehop/react";

const channelId = "weather";

export default function MyComponent() {
  const { state } = useReadChannelState(channelId);

  // state is null until the client has connected to the channel
  if (!state) {
    return <p>Loading...</p>;
  }

  return <p>Temperature in London: {state.london?.temperature}</p>;
}