@liveblocks/react

@liveblocks/react

@liveblocks/react provides React hooks and providers to integrate with Liveblocks—a platform to build, host, and scale collaborative applications with zero configuration, no maintenance required.

Installation

npm install @liveblocks/client @liveblocks/react

Documentation

Read the documentation for guides and API references.

Examples

Explore our collaborative examples to help you get started.

All examples are open-source and live in this repository, within /examples.

Releases

See the latest changes or learn more about upcoming releases.

Community

• Discord - To get involved with the Liveblocks community, ask questions and share tips.
• X - To receive updates, announcements, blog posts, and general Liveblocks tips.

License

Licensed under the Apache License 2.0, Copyright © 2021-present Liveblocks.

See LICENSE for more information.

Changelog

2.12.0

This release adds support for tracking synchronization status of pending local changes for any part of Liveblocks. Whether you use Storage, Text Editors, Threads, or Notifications.

If the client’s sync status is synchronized, it means all local pending changes have been persisted by our servers. If there are pending local changes in any part of Liveblocks you’re using, then the client’s sync status will be synchronizing.

Also, we’re introducing a way to prevent browser tabs from being closed while local changes are not yet synchronized. To opt-in to this protection, enable preventUnsavedChanges option on the client:

• In React: <LiveblocksProvider preventUnsavedChanges />
• Otherwise: createClient({ preventUnsavedChanges: true })

@liveblocks/client

• Add new API client.getSyncStatus() method.
• Add new client config option: preventUnsavedChanges.
• Expose ToImmutable<T> helper type.

@liveblocks/react

• Add new hook useSyncStatus that can be used to tell whether Liveblocks is synchronizing local changes to the server. Useful to display a "Saving..." spinner in your application, when used with useSyncStatus({ smooth: true }).
• Deprecated APIs:
  • useStorageStatus is now deprecated in favor of useSyncStatus.

@liveblocks/react-ui

• Take composers into account when the new preventUnsavedChanges option is set.

@liveblocks/react-lexical

• Add new hook useIsEditorReady which can be used to show a skeleton UI before the editor has received the initial text from the server.
• Deprecated APIs:
  • useEditorStatus is now deprecated in favor of useIsEditorReady (or useSyncStatus).