> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React Channels implementation

> How to subscribe to Channel messages and state using the Hop React SDK

## useChannelMessage

```ts theme={null}
useChannelMessage(channelId: string, eventName: string, listener: Function): void
```

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

### Example

<Info>
  This example assumes you have already initialized the [Hop React
  SDK](/sdks/client/react).
</Info>

```jsx theme={null}
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

```ts theme={null}
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

<Info>
  This example assumes you have already initialized the [Hop React
  SDK](/sdks/client/react).
</Info>

```jsx theme={null}
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>;
}
```