docs: update doc (#102)

README.zh-CN.md

@@ -71,6 +71,8 @@ This example will render Agora Client into a container on the page.
 
 - [`useVolumeLevel`](https://github.com/AgoraIO-Extensions/agora-rtc-react/tree/main/packages/agora-rtc-react/docs/hooks/useVolumeLevel.zh-CN.mdx) — 用于自动获取音频轨道音量级别，自动获取的频率为每秒一次。
 
+- [`useTrackEvent`](https://github.com/AgoraIO-Extensions/agora-rtc-react/tree/main/packages/agora-rtc-react/docs/hooks/useTrackEvent.zh-CN.mdx) — 用于监听本地轨道对象或远端轨道对象的特定事件。
+
 - [`useRemoteVideoTracks`](https://github.com/AgoraIO-Extensions/agora-rtc-react/tree/main/packages/agora-rtc-react/docs/hooks/useRemoteVideoTracks.zh-CN.mdx) — 用于自动订阅和获取远端用户视频轨道。
 
 - [`useRemoteUsers`](https://github.com/AgoraIO-Extensions/agora-rtc-react/tree/main/packages/agora-rtc-react/docs/hooks/useRemoteUsers.zh-CN.mdx) — 用于获取远端用户列表。
@@ -97,6 +99,8 @@ This example will render Agora Client into a container on the page.
 
 - [`useConnectionState`](https://github.com/AgoraIO-Extensions/agora-rtc-react/tree/main/packages/agora-rtc-react/docs/hooks/useConnectionState.zh-CN.mdx) — 用于获取详细的 SDK 连接状态。
 
+- [`useClientEvent`](https://github.com/AgoraIO-Extensions/agora-rtc-react/tree/main/packages/agora-rtc-react/docs/hooks/useClientEvent.zh-CN.mdx) — 用于监听 IAgoraRTCClient 对象的指定事件。
+
 - [`useAutoPlayVideoTrack`](https://github.com/AgoraIO-Extensions/agora-rtc-react/tree/main/packages/agora-rtc-react/docs/hooks/useAutoPlayVideoTrack.zh-CN.mdx) — 用于自动播放本地或远端视频轨道。
 
 - [`useAutoPlayAudioTrack`](https://github.com/AgoraIO-Extensions/agora-rtc-react/tree/main/packages/agora-rtc-react/docs/hooks/useAutoPlayAudioTrack.zh-CN.mdx) — 用于自动播放本地或远端音频轨道。

packages/agora-rtc-react/docs/hooks-en.mdx

@@ -130,9 +130,9 @@ Returns the volume level of an audio track at a frequency of once per second.
 
 #### Parameters
 
-| Parameter    | Type                                                                             | Required | Description                                                                                                                                                                  |
-| ------------ | -------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `audioTrack` | `IRemoteAudioTrack` | `ILocalAudioTrack` | `undefined` | No       | The local or remote audio track. The local audio track can be created by calling [`useLocalMicrophoneTrack`](#uselocalmicrophonetrack). If undefined, the volume level is 0. |
+| Parameter    | Type                                                                             | Required | Description                                                                                                                                                                         |
+| ------------ | -------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `audioTrack` | `IRemoteAudioTrack` | `ILocalAudioTrack` | `undefined` | No       | The local or remote audio track. The local audio track can be created by calling [`useLocalMicrophoneTrack`](./hooks#uselocalmicrophonetrack). If undefined, the volume level is 0. |
 
 #### Returns
 
@@ -206,7 +206,7 @@ Returns an object containing the following properties:
 | Property      | Type                                       | Description                                                                                                                                                                                                     |
 | ------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `data`        | `UID`                                      | The user ID if the user successfully joins the channel. If you does not specify a `uid` when passing `fetchArgs`, the default value `0` is returned.                                                            |
-| `isLoading`   | `boolean` 、                               | <li>`true`: The hook is performing operations related to joining the channel.</li><li>`false`: The hook completes operations related to joining the channel, but it does not indicate a successful result.</li> |
+| `isLoading`   | `boolean`                                  | <li>`true`: The hook is performing operations related to joining the channel.</li><li>`false`: The hook completes operations related to joining the channel, but it does not indicate a successful result.</li> |
 | `isConnected` | `boolean`                                  | <li>`true`: The SDK is connected to the server, indicating that the user successfully joins the channel.</li><li>`false`: The SDK is not connected to the server.</li>                                          |
 | `error`       | `AgoraRTCReactError` &VerticalLine; `null` | Returns `null` if the user successfully joins the channel, otherwise throws an error. See [`AgoraRTCReactError`](./data-types#agorartcreacterror) for details.                                                  |
 
@@ -216,11 +216,11 @@ Returns an object containing the following properties:
 import { useJoin } from "agora-rtc-react";
 
 function App() {
-  // you can use useJoin like this by passing a function as first argument.
+  // Example: passing a function as first argument
   // useJoin(async () => {
-  //   you can do some actions like fetching token before calling join.
+  //   Fetch the token before joining the channel. Note that the data type of getData must be fetchArgs
   //   const getData = await getToken();
-  //   return getData;  The data type of getData must be fetchArgs
+  //   return getData;
   // }, calling);
 
   useJoin(
@@ -560,7 +560,7 @@ This hook lets you automatically play a local or remote audio track.
 
 #### Returns
 
-无。
+None.
 
 #### Sample code
 

packages/agora-rtc-react/docs/hooks.mdx

@@ -130,9 +130,9 @@ function App() {
 
 #### 参数
 
-| 参数名       | 类型                                                                             | 是否必选 | 描述                                                                                                                              |
-| ------------ | -------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| `audioTrack` | `IRemoteAudioTrack` | `ILocalAudioTrack` | `undefined` | 可选     | 本地或远端音频轨道，其中本地音频轨道通过 [`useLocalMicrophoneTrack`](#uselocalmicrophonetrack) 创建。如果未定义，则音量级别为 0。 |
+| 参数名       | 类型                                                                             | 是否必选 | 描述                                                                                                                                     |
+| ------------ | -------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `audioTrack` | `IRemoteAudioTrack` | `ILocalAudioTrack` | `undefined` | 可选     | 本地或远端音频轨道，其中本地音频轨道通过 [`useLocalMicrophoneTrack`](./hooks#uselocalmicrophonetrack) 创建。如果未定义，则音量级别为 0。 |
 
 #### 返回值
 
@@ -216,11 +216,11 @@ function App() {
 import { useJoin } from "agora-rtc-react";
 
 function App() {
-  // you can use useJoin like this by passing a function as first argument.
+  // 传入异步函数示例
   // useJoin(async () => {
-  //   you can do some actions like fetching token before calling join.
+  //   在加入频道前执行获取 Token 的操作，注意 getData 类型必须为 fetchArgs
   //   const getData = await getToken();
-  //   return getData;  The data type of getData must be fetchArgs
+  //   return getData;
   // }, calling);
 
   useJoin(
@@ -574,3 +574,80 @@ function App() {
   return <></>;
 }
 ```
+
+<h2 className="anchor index-auto-group index-hook-useclientevent" id="useclientevent">
+  useClientEvent
+</h2>
+
+用于监听 `IAgoraRTCClient` 对象的指定事件。
+
+- 当组件挂载时，该 Hook 会注册对应的事件监听器。
+- 当组件卸载时，该 Hook 会销毁对应的事件监听器。
+
+#### 参数
+
+| 参数名     | 类型                                                                                                                                     | 是否必选 | 描述                                                                                                                                                                                                                      |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `client`   | [`IAgoraRTCClient`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/web_ng/interfaces/iagorartcclient.html) | 必选     | 通过 Web SDK 的 [`IAgoraRTC.createClient`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/iagorartc.html#createclient) 创建。                                                         |
+| `event`    | `string`                                                                                                                                 | 必选     | 事件名称。支持的事件详见[`IAgoraRTCClient.on`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/iagorartcclient.html?platform=All%20Platforms#on)。                                     |
+| `listener` | `Function`                                                                                                                               | 必选     | 回调函数。当传入的事件触发时，该函数会被调用。支持的回调详见[`IAgoraRTCClient.on`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/iagorartcclient.html?platform=All%20Platforms#on)。 |
+
+#### 返回值
+
+无。
+
+#### 使用示例
+
+```jsx
+import { useRTCClient, useClientEvent } from "agora-rtc-react";
+
+function App() {
+  const client = useRTCClient();
+  useClientEvent(client, "connection-state-change", () => {});
+
+  return <></>;
+}
+```
+
+<h2 className="anchor index-auto-group index-hook-usetrackevent" id="usetrackevent">
+  useTrackEvent
+</h2>
+
+用于监听本地轨道对象或远端轨道对象的特定事件。
+
+- 当组件挂载时，该 Hook 会注册对应的事件监听器。
+- 当组件卸载时，该 Hook 会销毁对应的事件监听器。
+
+#### 参数
+
+| 参数名     | 类型       | 是否必选 | 描述                                           |
+| ---------- | ---------- | -------- | ---------------------------------------------- |
+| `track`    | `ITrack`   | 必选     | 轨道对象。                                     |
+| `event`    | `string`   | 必选     | 事件名称。                                     |
+| `listener` | `Function` | 必选     | 回调函数。当传入的事件触发时，该函数会被调用。 |
+
+不同的 `track` 对应的 `event` 和 `listener` 也不同。支持传入的参数组合如下：
+
+| `track`                                                               | `event` 和 `listener`                                                                                                                                      |
+| --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ILocalTrack` &VerticalLine; `ILocalVideoTrack` &VerticalLine; `null` | 详见 [`ILocalTrack.on`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/ilocaltrack.html#on)。                          |
+| `IBufferSourceAudioTrack` &VerticalLine; `null`                       | 详见 [`IBufferSourceAudioTrack.on`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/ibuffersourceaudiotrack.html#on)。  |
+| `ILocalVideoTrack` &VerticalLine; `null`                              | 详见 [`ILocalVideoTrack.on`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/ilocalvideotrack.html#on)。                |
+| `IRemoteTrack` &VerticalLine; `null`                                  | 详见 [`IRemoteTrack.on`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/iremotetrack.html#event_first_frame_decoded)。 |
+
+#### 返回值
+
+无。
+
+#### 使用示例
+
+```jsx
+import { useRTCClient, useLocalCameraTrack, useTrackEvent } from "agora-rtc-react";
+
+function App() {
+  const videoTrack = useLocalCameraTrack();
+  useTrackEvent(client, "video-element-visible-status", () => {});
+
+  return <></>;
+}
+```

packages/agora-rtc-react/docs/hooks/useAutoPlayAudioTrack.en-US.mdx

@@ -14,7 +14,7 @@ This hook lets you automatically play a local or remote audio track.
 
 #### Returns
 
-无。
+None.
 
 #### Sample code
 

packages/agora-rtc-react/docs/hooks/useClientEvent.zh-CN.mdx

@@ -0,0 +1,31 @@
+## useClientEvent
+
+用于监听 `IAgoraRTCClient` 对象的指定事件。
+
+- 当组件挂载时，该 Hook 会注册对应的事件监听器。
+- 当组件卸载时，该 Hook 会销毁对应的事件监听器。
+
+#### 参数
+
+| 参数名     | 类型                                                                                                                                     | 是否必选 | 描述                                                                                                                                                                                                                      |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `client`   | [`IAgoraRTCClient`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/web_ng/interfaces/iagorartcclient.html) | 必选     | 通过 Web SDK 的 [`IAgoraRTC.createClient`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/iagorartc.html#createclient) 创建。                                                         |
+| `event`    | `string`                                                                                                                                 | 必选     | 事件名称。支持的事件详见[`IAgoraRTCClient.on`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/iagorartcclient.html?platform=All%20Platforms#on)。                                     |
+| `listener` | `Function`                                                                                                                               | 必选     | 回调函数。当传入的事件触发时，该函数会被调用。支持的回调详见[`IAgoraRTCClient.on`](https://docportal.shengwang.cn/cn/video-call-4.x/API%20Reference/web_ng/interfaces/iagorartcclient.html?platform=All%20Platforms#on)。 |
+
+#### 返回值
+
+无。
+
+#### 使用示例
+
+```jsx
+import { useRTCClient, useClientEvent } from "agora-rtc-react";
+
+function App() {
+  const client = useRTCClient();
+  useClientEvent(client, "connection-state-change", () => {});
+
+  return <></>;
+}
+```

packages/agora-rtc-react/docs/hooks/useJoin.en-US.mdx

@@ -19,7 +19,7 @@ Returns an object containing the following properties:
 | Property      | Type                                       | Description                                                                                                                                                                                                       |
 | ------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `data`        | `UID`                                      | The user ID if the user successfully joins the channel. If you does not specify a `uid` when passing `fetchArgs`, the default value `0` is returned.                                                              |
-| `isLoading`   | `boolean` 、                               | <li>`true`: The hook is performing operations related to joining the channel.</li><li>`false`: The hook completes operations related to joining the channel, but it does not indicate a successful result.</li>   |
+| `isLoading`   | `boolean`                                  | <li>`true`: The hook is performing operations related to joining the channel.</li><li>`false`: The hook completes operations related to joining the channel, but it does not indicate a successful result.</li>   |
 | `isConnected` | `boolean`                                  | <li>`true`: The SDK is connected to the server, indicating that the user successfully joins the channel.</li><li>`false`: The SDK is not connected to the server.</li>                                            |
 | `error`       | `AgoraRTCReactError` &VerticalLine; `null` | Returns `null` if the user successfully joins the channel, otherwise throws an error. See [`AgoraRTCReactError`](https://doc.shengwang.cn/api-ref/rtc/react/react-sdk/data-types#agorartcreacterror) for details. |
 
@@ -29,11 +29,11 @@ Returns an object containing the following properties:
 import { useJoin } from "agora-rtc-react";
 
 function App() {
-  // you can use useJoin like this by passing a function as first argument.
+  // Example: passing a function as first argument
   // useJoin(async () => {
-  //   you can do some actions like fetching token before calling join.
+  //   Fetch the token before joining the channel. Note that the data type of getData must be fetchArgs
   //   const getData = await getToken();
-  //   return getData;  The data type of getData must be fetchArgs
+  //   return getData;
   // }, calling);
 
   useJoin(

packages/agora-rtc-react/docs/hooks/useJoin.zh-CN.mdx

@@ -29,11 +29,11 @@
 import { useJoin } from "agora-rtc-react";
 
 function App() {
-  // you can use useJoin like this by passing a function as first argument.
+  // 传入异步函数示例
   // useJoin(async () => {
-  //   you can do some actions like fetching token before calling join.
+  //   在加入频道前执行获取 Token 的操作，注意 getData 类型必须为 fetchArgs
   //   const getData = await getToken();
-  //   return getData;  The data type of getData must be fetchArgs
+  //   return getData;
   // }, calling);
 
   useJoin(