React Channels implementation - Hop

useChannelMessage

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

You can use this hook to subscribe to Channel message events in your React app.

Example

This example assumes you have already initialized the Hop React SDK.

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

useReadChannelState(channelId: string): ChannelStateData

You can use this hook to subscribe to Channel state in your React app.

Hook Return Value

field	type	description
state	?object	the channel state
error	?object	leap error (if failed to subscribe)
subscription	enum	`non_existent`, `pending`, `unavailable`, or `available`

Example

This example assumes you have already initialized the Hop React SDK.

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>;
}