@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

v2.16.0

Our error listener APIs will now receive more errors in general, including errors from using Comments & Notifications. Previously, these would only receive room connection errors from Presence, Storage, or Yjs.

For example, now when creation of a thread fails, deletion of a comment fails, marking a notification as read fails, etc.

@liveblocks/react

Breaking: More errors can appear in useErrorListener()

// ❌ Before: required a RoomProvider and would only notify about errors for that room
// ✅ Now: requires a LiveblocksProvider and will notify about errors for any room
useErrorListener((err: LiveblocksError) => {
  /* show toast, or notify Sentry, Datadog, etc */
});

See the Upgrade Guide for 2.16 to learn how to adapt your code.

Filtering by absence of metadata

We now support filtering threads by absence of metadata as well in useThreads({ query }) (or useUserThreads_experimental({ query })).

For example, you can now filter threads that do not have a color attribute set in their metadata:

useThreads({
  query: {
    // Filter any "pinned" threads that don't have a color set
    metadata: {
      pinned: true,
      color: null, // ✨
    },
  },
});

See the Upgrade Guide for 2.16 to learn how to adapt your code.

Bug fixes

• Automatically refresh Comments and Notifications when the browser window regains focus.

@liveblocks/client

The error listener APIs will now receive more errors in general, including errors from using Comments & Notifications. Previously, these would only receive room connection errors from Presence, Storage, or Yjs.

// 👌 Same as before, but might now also receive errors related to Comments & Notifications
room.subscribe("error", (err) => { ... });

@liveblocks/react-ui

• Most of the icons used in the default components are now usable as <Icon.* /> via import { Icon } from "@liveblocks/react-ui".

@liveblocks/react-lexical and @liveblocks/react-tiptap

• Add <Toolbar /> and <FloatingToolbar /> components to simplify building editor toolbars. They come with default controls out-of-the-box based on what the editor they’re attached to supports, but they’re also heavily extendable and customizable. Use inner components like <Toolbar.Toggle /> and <Toolbar.Separator /> to extend the defaults with your own actions, or start from scratch while customizing some of the defaults via <Toolbar.SectionInline /> or <Toolbar.BlockSelector /> for example.

@liveblocks/react-lexical

• Add isTextFormatActive and isBlockNodeActive utilities.

@liveblocks/yjs

• Add new option useV2Encoding_experimental to LiveblocksYjsProvider to enable experimental V2 encoding for Yjs.