Skip to content

Commit 0d954f4

Browse files
owenpearsonowenpearson
authored
ably-chat-js react subpath changes (#2544)
1 parent af65222 commit 0d954f4

File tree

17 files changed

+60
-45
lines changed

17 files changed

+60
-45
lines changed

‎content/chat/connect.textile

+4-4
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const error = chatClient.connection.error;
3737
```
3838

3939
```[react]
40-
import { useChatConnection } from '@ably/chat';
40+
import { useChatConnection } from '@ably/chat/react';
4141

4242
const MyComponent = () => {
4343
const { currentStatus } = useChatConnection({
@@ -61,7 +61,7 @@ blang[react].
6161
Hooks related to chat features, such as @useMessages@ and @useTyping@, also return the current @connectionStatus@ in their response.
6262

6363
```[react]
64-
import { useMessages } from '@ably/chat';
64+
import { useMessages } from '@ably/chat/react';
6565

6666
const MyComponent = () => {
6767
const { connectionStatus } = useMessages({
@@ -84,7 +84,7 @@ const { off } = chatClient.connection.onStatusChange((change) => console.log(cha
8484
```
8585

8686
```[react]
87-
import { useOccupancy } from '@ably/chat';
87+
import { useOccupancy } from '@ably/chat/react';
8888

8989
const MyComponent = () => {
9090
useOccupancy({
@@ -159,7 +159,7 @@ const { off } = room.messages.onDiscontinuity((reason?: ErrorInfo) => {
159159

160160
```[react]
161161
import { useState } from 'react';
162-
import { useMessages } from '@ably/chat';
162+
import { useMessages } from '@ably/chat/react';
163163

164164
const MyComponent = () => {
165165
useMessages({

‎content/chat/rooms/history.textile

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ if (historicalMessages.hasNext()) {
3232
```
3333

3434
```[react]
35-
import { useMessages } from '@ably/chat';
35+
import { useMessages } from '@ably/chat/react';
3636

3737
const MyComponent = () => {
3838
const { get } = useMessages();
@@ -110,7 +110,7 @@ if (historicalMessages.hasNext()) {
110110

111111
```[react]
112112
import { useEffect, useState } from 'react';
113-
import { useMessages } from '@ably/chat';
113+
import { useMessages } from '@ably/chat/react';
114114

115115
const MyComponent = () => {
116116
const [loading, setLoading] = useState(true);

‎content/chat/rooms/index.textile

+5-4
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ const room = await chatClient.rooms.get('basketball-stream', AllFeaturesEnabled)
3535

3636
```[react]
3737
import * as Ably from 'ably';
38-
import { ChatClientProvider, ChatRoomProvider, LogLevel, AllFeaturesEnabled } from '@ably/chat';
38+
import { LogLevel, AllFeaturesEnabled } from '@ably/chat';
39+
import { ChatClientProvider, ChatRoomProvider } from '@ably/chat/react';
3940

4041
const realtimeClient = new Ably.Realtime({ key: '{{API_KEY}}', clientId: 'clientId' });
4142
const chatClient = new ChatClient(realtimeClient);
@@ -177,7 +178,7 @@ await room.attach();
177178
```
178179

179180
```[react]
180-
import { useRoom } from '@ably/chat';
181+
import { useRoom } from '@ably/chat/react';
181182

182183
const MyComponent = () => {
183184
const { attach } = useRoom();
@@ -251,7 +252,7 @@ const currentError = room.error;
251252
```
252253

253254
```[react]
254-
import { useMessages } from '@ably/chat';
255+
import { useMessages } from '@ably/chat/react';
255256

256257
const MyComponent = () => {
257258
const { roomStatus, roomError } = useMessages({
@@ -334,7 +335,7 @@ blang[react].
334335
Listeners can also be registered to monitor the changes in room status. Any hooks that take an optional listener to monitor their events, such as typing indicator events in the @useTyping@ hook, can also register a status change listener. Changing the value provided for a listener will cause the previously registered listener instance to stop receiving events. All messages will be received by exactly one listener.
335336

336337
```[react]
337-
import { useOccupancy } from '@ably/chat';
338+
import { useOccupancy } from '@ably/chat/react';
338339

339340
const MyComponent = () => {
340341
useOccupancy({

‎content/chat/rooms/messages.textile

+10-6
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const {unsubscribe} = room.messages.subscribe((event) => {
3030

3131
```[react]
3232
import { useState } from 'react';
33-
import { useMessages } from '@ably/chat';
33+
import { useMessages } from '@ably/chat/react';
3434

3535
const MyComponent = () => {
3636
useMessages({
@@ -157,7 +157,7 @@ await room.messages.send({text: 'hello'});
157157
```
158158

159159
```[react]
160-
import { useMessages } from '@ably/chat';
160+
import { useMessages } from '@ably/chat/react';
161161

162162
const MyComponent = () => {
163163
const { send } = useMessages();
@@ -202,7 +202,8 @@ await room.messages.update(updatedMessage, { description: "Message update by use
202202
```
203203

204204
```[react]
205-
import { Message, useMessages } from '@ably/chat';
205+
import { Message } from '@ably/chat';
206+
import { useMessages } from '@ably/chat/react';
206207

207208
const MyComponent = () => {
208209
const { update } = useMessages();
@@ -273,7 +274,8 @@ const {unsubscribe} = room.messages.subscribe((event) => {
273274
```
274275

275276
```[react]
276-
import { MessageEvents, useMessages } from '@ably/chat';
277+
import { MessageEvents } from '@ably/chat';
278+
import { useMessages } from '@ably/chat/react';
277279

278280
const MyComponent = () => {
279281
useMessages({
@@ -386,7 +388,8 @@ await room.messages.delete(messageToDelete, { description: 'Message deleted by u
386388
```
387389

388390
```[react]
389-
import { Message, useMessages } from '@ably/chat';
391+
import { Message } from '@ably/chat';
392+
import { useMessages } from '@ably/chat/react';
390393

391394
const MyComponent = () => {
392395
const { deleteMessage } = useMessages();
@@ -458,7 +461,8 @@ const {unsubscribe} = room.messages.subscribe((event) => {
458461
```
459462

460463
```[react]
461-
import { MessageEvents, useMessages } from '@ably/chat';
464+
import { MessageEvents } from '@ably/chat';
465+
import { useMessages } from '@ably/chat/react';
462466

463467
const MyComponent = () => {
464468
useMessages({

‎content/chat/rooms/occupancy.textile

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const {unsubscribe} = room.occupancy.subscribe((event) => {
3030
```
3131

3232
```[react]
33-
import { useOccupancy } from '@ably/chat';
33+
import { useOccupancy } from '@ably/chat/react';
3434

3535
const MyComponent = () => {
3636
const { connections, presenceMembers } = useOccupancy({

‎content/chat/rooms/presence.textile

+4-4
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const { unsubscribe } = room.presence.subscribe((event) => {
3333

3434
```[react]
3535
import React from 'react';
36-
import { usePresenceListener } from '@ably/chat';
36+
import { usePresenceListener } from '@ably/chat/react';
3737

3838
const MyComponent = () => {
3939
const { presenceData, error } = usePresenceListener({
@@ -180,7 +180,7 @@ await room.presence.enter({ status: 'available' });
180180

181181
```[react]
182182
import React from 'react';
183-
import { usePresence } from '@ably/chat';
183+
import { usePresence } from '@ably/chat/react';
184184

185185
const MyComponent = () => {
186186
const { leave, isPresent } = usePresence({
@@ -220,7 +220,7 @@ await room.presence.update({ status: 'busy' });
220220

221221
```[react]
222222
import React from 'react';
223-
import { usePresence } from '@ably/chat';
223+
import { usePresence } from '@ably/chat/react';
224224

225225
const MyComponent = () => {
226226
const { update, isPresent } = usePresence({
@@ -264,7 +264,7 @@ await room.presence.leave({ status: 'Be back later!' });
264264

265265
```[react]
266266
import React from 'react';
267-
import { usePresence } from '@ably/chat';
267+
import { usePresence } from '@ably/chat/react';
268268

269269
const MyComponent = () => {
270270
const { leave, isPresent } = usePresence({

‎content/chat/rooms/reactions.textile

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const {unsubscribe} = room.reactions.subscribe((reaction) => {
3333

3434
```[react]
3535
import React, { useCallback } from 'react';
36-
import { useRoomReactions } from '@ably/chat';
36+
import { useRoomReactions } from '@ably/chat/react';
3737

3838
const MyComponent = () => {
3939
useRoomReactions({
@@ -139,7 +139,7 @@ await room.reactions.send({type: "heart", metadata: {"effect": "fireworks"}});
139139
```
140140

141141
```[react]
142-
import { useRoomReactions } from '@ably/chat';
142+
import { useRoomReactions } from '@ably/chat/react';
143143

144144
const MyComponent = () => {
145145
const { send } = useRoomReactions();

‎content/chat/rooms/typing.textile

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const {unsubscribe} = room.typing.subscribe((event) => {
3030
```
3131

3232
```[react]
33-
import { useTyping } from '@ably/chat';
33+
import { useTyping } from '@ably/chat/react';
3434

3535
const MyComponent = () => {
3636
const {currentlyTyping, error } = useTyping({
@@ -137,7 +137,7 @@ await room.typing.start();
137137
```
138138

139139
```[react]
140-
import { useTyping } from '@ably/chat';
140+
import { useTyping } from '@ably/chat/react';
141141

142142
const MyComponent = () => {
143143
const { start, currentlyTyping, error } = useTyping();
@@ -174,7 +174,7 @@ await room.typing.stop();
174174
```
175175

176176
```[react]
177-
import { useTyping } from '@ably/chat';
177+
import { useTyping } from '@ably/chat/react';
178178

179179
const MyComponent = () => {
180180
const { stop, error } = useTyping();

‎content/chat/setup.textile

+4-2
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ blang[javascript,react].
6262

6363
```[react]
6464
import * as Ably from 'ably';
65-
import { ChatClient, ChatClientProvider} from '@ably/chat';
65+
import { ChatClient } from '@ably/chat';
66+
import { ChatClientProvider } from '@ably/chat/react';
6667
```
6768

6869
blang[swift,kotlin].
@@ -205,7 +206,8 @@ const chatClient = new ChatClient(ably, {logHandler: logWriteFunc, logLevel: 'de
205206

206207
```[react]
207208
import * as Ably from 'ably';
208-
import { ChatClientProvider, LogLevel } from '@ably/chat';
209+
import { LogLevel } from '@ably/chat';
210+
import { ChatClientProvider } from '@ably/chat/react';
209211

210212
const ably = new Ably.Realtime({ key: '{{API_KEY}}', clientId: '<clientId>'});
211213
const chatClient = new ChatClient(ably, {logHandler: logWriteFunc, logLevel: 'debug' });

‎examples/chat-online-status/react/src/App.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { useEffect, useState } from 'react';
2+
import {
3+
ChatClient,
4+
AllFeaturesEnabled,
5+
} from '@ably/chat';
26
import {
37
useChatClient,
48
useRoom,
59
usePresenceListener,
610
usePresence,
7-
ChatClient,
811
ChatClientProvider,
912
ChatRoomProvider,
10-
AllFeaturesEnabled,
11-
} from '@ably/chat';
13+
} from '@ably/chat/react';
1214
import { Realtime } from 'ably';
1315
import minifaker from 'minifaker';
1416
import 'minifaker/locales/en';

‎examples/chat-room-history/react/src/App.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { ChatClient, ChatClientProvider, ChatRoomProvider, AllFeaturesEnabled } from '@ably/chat';
1+
import { ChatClient, AllFeaturesEnabled } from '@ably/chat';
2+
import { ChatClientProvider, ChatRoomProvider } from '@ably/chat/react';
23
import { Realtime } from 'ably';
34
import minifaker from 'minifaker';
45
import 'minifaker/locales/en';

‎examples/chat-room-history/react/src/Chat.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Message, useMessages, useChatClient } from '@ably/chat';
1+
import { Message } from '@ably/chat';
2+
import { useChatClient, useMessages } from '@ably/chat/react';
23
import { useState } from 'react';
34
import './styles/styles.css';
45

‎examples/chat-room-history/react/src/Home.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from 'react';
2-
import { useRoom, useMessages } from '@ably/chat';
2+
import { useRoom, useMessages } from '@ably/chat/react';
33
import { useNavigate } from 'react-router-dom';
44
import './styles/styles.css';
55

‎examples/chat-room-messages/react/src/App.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React, { useEffect, useState } from 'react';
22
import {
33
Message,
4+
ChatClient,
5+
AllFeaturesEnabled,
6+
} from '@ably/chat';
7+
import {
48
useRoom,
59
useMessages,
610
useChatClient,
7-
ChatClient,
811
ChatClientProvider,
912
ChatRoomProvider,
10-
AllFeaturesEnabled,
11-
} from '@ably/chat';
13+
} from '@ably/chat/react';
1214
import { Realtime } from 'ably';
1315
import './styles/styles.css';
1416

‎examples/chat-room-reactions/react/src/App.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState } from 'react';
2-
import { ChatClient, ChatClientProvider, ChatRoomProvider, AllFeaturesEnabled } from '@ably/chat';
2+
import { ChatClient, AllFeaturesEnabled, Reaction as ReactionInterface } from '@ably/chat';
3+
import { ChatClientProvider, ChatRoomProvider, useRoom, useRoomReactions } from '@ably/chat/react';
34
import { Realtime } from 'ably';
4-
import { Reaction as ReactionInterface, useRoom, useRoomReactions } from '@ably/chat';
55
import './styles/styles.css';
66

77
const mockNames = ['Bob', 'Jane', 'John', 'Sammy'];

‎examples/chat-typing-indicator/react/src/App.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import { useEffect, useState } from 'react';
22
import {
33
TypingEvent,
4+
ChatClient ,
5+
AllFeaturesEnabled,
6+
TypingOptions,
7+
} from '@ably/chat';
8+
import {
9+
useTyping,
410
useChatClient,
511
useRoom,
6-
useTyping,
7-
ChatClient,
812
ChatClientProvider,
913
ChatRoomProvider,
10-
AllFeaturesEnabled,
11-
TypingOptions,
12-
} from '@ably/chat';
14+
} from '@ably/chat/react';
1315
import { Realtime } from 'ably';
1416
import './styles/styles.css';
1517

‎examples/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
"spaces-member-location-react": "yarn workspace spaces-member-location-react dev"
8787
},
8888
"dependencies": {
89-
"@ably/chat": "^0.5.0",
89+
"@ably/chat": "^0.6.0",
9090
"@ably/spaces": "^0.4.0",
9191
"ably": "^2.5.0",
9292
"cors": "^2.8.5",

0 commit comments

Comments
 (0)