@liveblocks/react 0.15.5 → 0.15.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.d.ts CHANGED
@@ -1,206 +1,208 @@
1
- import { Client, Others, Presence, LiveObject, LiveMap, Room, User, LiveList, BroadcastOptions } from "@liveblocks/client";
2
- import * as React from "react";
3
- declare type LiveblocksProviderProps = {
4
- children: React.ReactNode;
5
- client: Client;
6
- };
7
- /**
8
- * Makes the Liveblocks client available in the component hierarchy below.
9
- */
10
- export declare function LiveblocksProvider(props: LiveblocksProviderProps): JSX.Element;
11
- declare type RoomProviderProps<TStorageRoot> = {
12
- /**
13
- * The id of the room you want to connect to
14
- */
15
- id: string;
16
- /**
17
- * A callback that let you initialize the default presence when entering the room.
18
- * If ommited, the default presence will be an empty object
19
- */
20
- defaultPresence?: () => Presence;
21
- defaultStorageRoot?: TStorageRoot;
22
- children: React.ReactNode;
23
- };
24
- /**
25
- * Makes a Room available in the component hierarchy below.
26
- * When this component is unmounted, the current user leave the room.
27
- * That means that you can't have 2 RoomProvider with the same room id in your react tree.
28
- */
29
- export declare function RoomProvider<TStorageRoot>({ id, children, defaultPresence, defaultStorageRoot, }: RoomProviderProps<TStorageRoot>): JSX.Element;
30
- /**
31
- * Returns the room of the nearest RoomProvider above in the react component tree
32
- */
33
- export declare function useRoom(): Room;
34
- /**
35
- * Returns the presence of the current user of the current room, and a function to update it.
36
- * It is different from the setState function returned by the useState hook from React.
37
- * You don't need to pass the full presence object to update it.
38
- *
39
- * @example
40
- * import { useMyPresence } from "@liveblocks/react";
41
- *
42
- * const [myPresence, updateMyPresence] = useMyPresence();
43
- * updateMyPresence({ x: 0 });
44
- * updateMyPresence({ y: 0 });
45
- *
46
- * // At the next render, "myPresence" will be equal to "{ x: 0, y: 0 }"
47
- */
48
- export declare function useMyPresence<T extends Presence>(): [
49
- T,
50
- (overrides: Partial<T>, options?: {
51
- addToHistory: boolean;
52
- }) => void
53
- ];
54
- /**
55
- * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
56
- * If you don't use the current user presence in your component, but you need to update it (e.g. live cursor), it's better to use useUpdateMyPresence to avoid unnecessary renders.
57
- *
58
- * @example
59
- * import { useUpdateMyPresence } from "@liveblocks/react";
60
- *
61
- * const updateMyPresence = useUpdateMyPresence();
62
- * updateMyPresence({ x: 0 });
63
- * updateMyPresence({ y: 0 });
64
- *
65
- * // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
66
- */
67
- export declare function useUpdateMyPresence<T extends Presence>(): (overrides: Partial<T>, options?: {
68
- addToHistory: boolean;
69
- }) => void;
70
- /**
71
- * Returns an object that lets you get information about all the the users currently connected in the room.
72
- *
73
- * @example
74
- * import { useOthers } from "@liveblocks/react";
75
- *
76
- * const others = useOthers();
77
- *
78
- * // Example to map all cursors in jsx
79
- * {
80
- * others.map(({ connectionId, presence }) => {
81
- * if(presence == null || presence.cursor == null) {
82
- * return null;
83
- * }
84
- * return <Cursor key={connectionId} cursor={presence.cursor} />
85
- * })
86
- * }
87
- */
88
- export declare function useOthers<T extends Presence>(): Others<T>;
89
- /**
90
- * Returns a callback that lets you broadcast custom events to other users in the room
91
- *
92
- * @example
93
- * import { useBroadcastEvent } from "@liveblocks/react";
94
- *
95
- * const broadcast = useBroadcastEvent();
96
- *
97
- * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
98
- */
99
- export declare function useBroadcastEvent(): (event: any, options?: BroadcastOptions) => void;
100
- /**
101
- * useErrorListener is a react hook that lets you react to potential room connection errors.
102
- *
103
- * @example
104
- * import { useErrorListener } from "@liveblocks/react";
105
- *
106
- * useErrorListener(er => {
107
- * console.error(er);
108
- * })
109
- */
110
- export declare function useErrorListener(callback: (er: Error) => void): void;
111
- /**
112
- * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
113
- *
114
- * @example
115
- * import { useEventListener } from "@liveblocks/react";
116
- *
117
- * useEventListener(({ connectionId, event }) => {
118
- * if (event.type === "CUSTOM_EVENT") {
119
- * // Do something
120
- * }
121
- * });
122
- */
123
- export declare function useEventListener<TEvent>(callback: ({ connectionId, event, }: {
124
- connectionId: number;
125
- event: TEvent;
126
- }) => void): void;
127
- /**
128
- * Gets the current user once it is connected to the room.
129
- *
130
- * @example
131
- * import { useSelf } from "@liveblocks/react";
132
- *
133
- * const user = useSelf();
134
- */
135
- export declare function useSelf<TPresence extends Presence = Presence>(): User<TPresence> | null;
136
- export declare function useStorage<TRoot extends Record<string, any>>(): [
137
- root: LiveObject<TRoot> | null
138
- ];
139
- /**
140
- * Returns the LiveMap associated with the provided key. If the LiveMap does not exist, a new empty LiveMap will be created.
141
- * The hook triggers a re-render if the LiveMap is updated, however it does not triggers a re-render if a nested CRDT is updated.
142
- *
143
- * @param key The storage key associated with the LiveMap
144
- * @param entries Optional entries that are used to create the LiveMap for the first time
145
- * @returns null while the storage is loading, otherwise, returns the LiveMap associated to the storage
146
- *
147
- * @example
148
- * const emptyMap = useMap("mapA");
149
- * const mapWithItems = useMap("mapB", [["keyA", "valueA"], ["keyB", "valueB"]]);
150
- */
151
- export declare function useMap<TKey extends string, TValue>(key: string, entries?: readonly (readonly [TKey, TValue])[] | null | undefined): LiveMap<TKey, TValue> | null;
152
- /**
153
- * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.
154
- * The hook triggers a re-render if the LiveList is updated, however it does not triggers a re-render if a nested CRDT is updated.
155
- *
156
- * @param key The storage key associated with the LiveList
157
- * @param items Optional items that are used to create the LiveList for the first time
158
- * @returns null while the storage is loading, otherwise, returns the LiveList associated to the storage
159
- *
160
- * @example
161
- * const emptyList = useList("listA");
162
- * const listWithItems = useList("listB", ["a", "b", "c"]);
163
- */
164
- export declare function useList<TValue>(key: string, items?: TValue[] | undefined): LiveList<TValue> | null;
165
- /**
166
- * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.
167
- * The hook triggers a re-render if the LiveObject is updated, however it does not triggers a re-render if a nested CRDT is updated.
168
- *
169
- * @param key The storage key associated with the LiveObject
170
- * @param initialData Optional data that is used to create the LiveObject for the first time
171
- * @returns null while the storage is loading, otherwise, returns the LveObject associated to the storage
172
- *
173
- * @example
174
- * const object = useObject("obj", {
175
- * company: "Liveblocks",
176
- * website: "https://liveblocks.io"
177
- * });
178
- */
179
- export declare function useObject<TData>(key: string, initialData?: TData): LiveObject<TData> | null;
180
- /**
181
- * Returns a function that undoes the last operation executed by the current client.
182
- * It does not impact operations made by other clients.
183
- */
184
- export declare function useUndo(): () => void;
185
- /**
186
- * Returns a function that redoes the last operation executed by the current client.
187
- * It does not impact operations made by other clients.
188
- */
189
- export declare function useRedo(): () => void;
190
- /**
191
- * Returns a function that batches modifications made during the given function.
192
- * All the modifications are sent to other clients in a single message.
193
- * All the modifications are merged in a single history item (undo/redo).
194
- * All the subscribers are called only after the batch is over.
195
- */
196
- export declare function useBatch(): (fn: () => void) => void;
197
- /**
198
- * Returns the room.history
199
- */
200
- export declare function useHistory(): {
201
- undo: () => void;
202
- redo: () => void;
203
- pause: () => void;
204
- resume: () => void;
205
- };
206
- export {};
1
+ import { Room, Presence, Others, BroadcastOptions, User, LiveObject, LiveMap, LiveList, Client } from '@liveblocks/client';
2
+ import * as React from 'react';
3
+
4
+ declare type LiveblocksProviderProps = {
5
+ children: React.ReactNode;
6
+ client: Client;
7
+ };
8
+ /**
9
+ * Makes the Liveblocks client available in the component hierarchy below.
10
+ */
11
+ declare function LiveblocksProvider(props: LiveblocksProviderProps): JSX.Element;
12
+ declare type RoomProviderProps<TStorageRoot> = {
13
+ /**
14
+ * The id of the room you want to connect to
15
+ */
16
+ id: string;
17
+ /**
18
+ * A callback that let you initialize the default presence when entering the room.
19
+ * If ommited, the default presence will be an empty object
20
+ */
21
+ defaultPresence?: () => Presence;
22
+ defaultStorageRoot?: TStorageRoot;
23
+ children: React.ReactNode;
24
+ };
25
+ /**
26
+ * Makes a Room available in the component hierarchy below.
27
+ * When this component is unmounted, the current user leave the room.
28
+ * That means that you can't have 2 RoomProvider with the same room id in your react tree.
29
+ */
30
+ declare function RoomProvider<TStorageRoot>({ id, children, defaultPresence, defaultStorageRoot, }: RoomProviderProps<TStorageRoot>): JSX.Element;
31
+ /**
32
+ * Returns the room of the nearest RoomProvider above in the react component tree
33
+ */
34
+ declare function useRoom(): Room;
35
+ /**
36
+ * Returns the presence of the current user of the current room, and a function to update it.
37
+ * It is different from the setState function returned by the useState hook from React.
38
+ * You don't need to pass the full presence object to update it.
39
+ *
40
+ * @example
41
+ * import { useMyPresence } from "@liveblocks/react";
42
+ *
43
+ * const [myPresence, updateMyPresence] = useMyPresence();
44
+ * updateMyPresence({ x: 0 });
45
+ * updateMyPresence({ y: 0 });
46
+ *
47
+ * // At the next render, "myPresence" will be equal to "{ x: 0, y: 0 }"
48
+ */
49
+ declare function useMyPresence<T extends Presence>(): [
50
+ T,
51
+ (overrides: Partial<T>, options?: {
52
+ addToHistory: boolean;
53
+ }) => void
54
+ ];
55
+ /**
56
+ * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
57
+ * If you don't use the current user presence in your component, but you need to update it (e.g. live cursor), it's better to use useUpdateMyPresence to avoid unnecessary renders.
58
+ *
59
+ * @example
60
+ * import { useUpdateMyPresence } from "@liveblocks/react";
61
+ *
62
+ * const updateMyPresence = useUpdateMyPresence();
63
+ * updateMyPresence({ x: 0 });
64
+ * updateMyPresence({ y: 0 });
65
+ *
66
+ * // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
67
+ */
68
+ declare function useUpdateMyPresence<T extends Presence>(): (overrides: Partial<T>, options?: {
69
+ addToHistory: boolean;
70
+ }) => void;
71
+ /**
72
+ * Returns an object that lets you get information about all the the users currently connected in the room.
73
+ *
74
+ * @example
75
+ * import { useOthers } from "@liveblocks/react";
76
+ *
77
+ * const others = useOthers();
78
+ *
79
+ * // Example to map all cursors in jsx
80
+ * {
81
+ * others.map(({ connectionId, presence }) => {
82
+ * if(presence == null || presence.cursor == null) {
83
+ * return null;
84
+ * }
85
+ * return <Cursor key={connectionId} cursor={presence.cursor} />
86
+ * })
87
+ * }
88
+ */
89
+ declare function useOthers<T extends Presence>(): Others<T>;
90
+ /**
91
+ * Returns a callback that lets you broadcast custom events to other users in the room
92
+ *
93
+ * @example
94
+ * import { useBroadcastEvent } from "@liveblocks/react";
95
+ *
96
+ * const broadcast = useBroadcastEvent();
97
+ *
98
+ * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
99
+ */
100
+ declare function useBroadcastEvent(): (event: any, options?: BroadcastOptions) => void;
101
+ /**
102
+ * useErrorListener is a react hook that lets you react to potential room connection errors.
103
+ *
104
+ * @example
105
+ * import { useErrorListener } from "@liveblocks/react";
106
+ *
107
+ * useErrorListener(er => {
108
+ * console.error(er);
109
+ * })
110
+ */
111
+ declare function useErrorListener(callback: (er: Error) => void): void;
112
+ /**
113
+ * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
114
+ *
115
+ * @example
116
+ * import { useEventListener } from "@liveblocks/react";
117
+ *
118
+ * useEventListener(({ connectionId, event }) => {
119
+ * if (event.type === "CUSTOM_EVENT") {
120
+ * // Do something
121
+ * }
122
+ * });
123
+ */
124
+ declare function useEventListener<TEvent>(callback: ({ connectionId, event, }: {
125
+ connectionId: number;
126
+ event: TEvent;
127
+ }) => void): void;
128
+ /**
129
+ * Gets the current user once it is connected to the room.
130
+ *
131
+ * @example
132
+ * import { useSelf } from "@liveblocks/react";
133
+ *
134
+ * const user = useSelf();
135
+ */
136
+ declare function useSelf<TPresence extends Presence = Presence>(): User<TPresence> | null;
137
+ declare function useStorage<TRoot extends Record<string, any>>(): [
138
+ root: LiveObject<TRoot> | null
139
+ ];
140
+ /**
141
+ * Returns the LiveMap associated with the provided key. If the LiveMap does not exist, a new empty LiveMap will be created.
142
+ * The hook triggers a re-render if the LiveMap is updated, however it does not triggers a re-render if a nested CRDT is updated.
143
+ *
144
+ * @param key The storage key associated with the LiveMap
145
+ * @param entries Optional entries that are used to create the LiveMap for the first time
146
+ * @returns null while the storage is loading, otherwise, returns the LiveMap associated to the storage
147
+ *
148
+ * @example
149
+ * const emptyMap = useMap("mapA");
150
+ * const mapWithItems = useMap("mapB", [["keyA", "valueA"], ["keyB", "valueB"]]);
151
+ */
152
+ declare function useMap<TKey extends string, TValue>(key: string, entries?: readonly (readonly [TKey, TValue])[] | null | undefined): LiveMap<TKey, TValue> | null;
153
+ /**
154
+ * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.
155
+ * The hook triggers a re-render if the LiveList is updated, however it does not triggers a re-render if a nested CRDT is updated.
156
+ *
157
+ * @param key The storage key associated with the LiveList
158
+ * @param items Optional items that are used to create the LiveList for the first time
159
+ * @returns null while the storage is loading, otherwise, returns the LiveList associated to the storage
160
+ *
161
+ * @example
162
+ * const emptyList = useList("listA");
163
+ * const listWithItems = useList("listB", ["a", "b", "c"]);
164
+ */
165
+ declare function useList<TValue>(key: string, items?: TValue[] | undefined): LiveList<TValue> | null;
166
+ /**
167
+ * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.
168
+ * The hook triggers a re-render if the LiveObject is updated, however it does not triggers a re-render if a nested CRDT is updated.
169
+ *
170
+ * @param key The storage key associated with the LiveObject
171
+ * @param initialData Optional data that is used to create the LiveObject for the first time
172
+ * @returns null while the storage is loading, otherwise, returns the LveObject associated to the storage
173
+ *
174
+ * @example
175
+ * const object = useObject("obj", {
176
+ * company: "Liveblocks",
177
+ * website: "https://liveblocks.io"
178
+ * });
179
+ */
180
+ declare function useObject<TData>(key: string, initialData?: TData): LiveObject<TData> | null;
181
+ /**
182
+ * Returns a function that undoes the last operation executed by the current client.
183
+ * It does not impact operations made by other clients.
184
+ */
185
+ declare function useUndo(): () => void;
186
+ /**
187
+ * Returns a function that redoes the last operation executed by the current client.
188
+ * It does not impact operations made by other clients.
189
+ */
190
+ declare function useRedo(): () => void;
191
+ /**
192
+ * Returns a function that batches modifications made during the given function.
193
+ * All the modifications are sent to other clients in a single message.
194
+ * All the modifications are merged in a single history item (undo/redo).
195
+ * All the subscribers are called only after the batch is over.
196
+ */
197
+ declare function useBatch(): (fn: () => void) => void;
198
+ /**
199
+ * Returns the room.history
200
+ */
201
+ declare function useHistory(): {
202
+ undo: () => void;
203
+ redo: () => void;
204
+ pause: () => void;
205
+ resume: () => void;
206
+ };
207
+
208
+ export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };