@sanity/collaboration

React components for commenting on Sanity content: a comments panel with threads, replies, mentions and reactions, plus inline comments on a Portable Text field.

The documentation is on sanity.io: Collaboration. Start with Get started.

[!NOTE] The package is in beta, on 0.x. A 0.x minor can contain breaking changes, so check the changelog before you upgrade.

Install

pnpm add @sanity/collaboration

Required peers: react, react-dom, @sanity/ui v4, styled-components, @sanity/icons and @portabletext/editor. @sanity/sdk and @sanity/sdk-react are optional peers, needed only for the /sdk entry point, which requires version 3.11.0 or later. The exact ranges are in the package’s package.json.

Styles and theme

Import the Sanity UI stylesheet once, and render the components inside a Sanity UI ThemeProvider. A Studio already has one.

import '@sanity/ui/styles.css'

Entry points

| Import | Contains | | --------------------------- | ---------------------------------------------------------------- | | @sanity/collaboration | Data types and pure helpers. No React, no SDK. | | @sanity/collaboration/ui | Components and hooks that take data and callbacks as props. | | @sanity/collaboration/sdk | The same components wired to Sanity through @sanity/sdk-react. |

The root and /ui never import the SDK, so they work without it installed.

Example

import {SDKCommentsPanel, SDKCommentsProvider} from '@sanity/collaboration/sdk'
import {Suspense} from 'react'

export function Comments() {
  return (
    <Suspense fallback={<p>Loading comments…</p>}>
      <SDKCommentsProvider>
        <SDKCommentsPanel
          documentId="post-123"
          documentType="post"
          compose={{fieldPath: 'title'}}
        />
      </SDKCommentsProvider>
    </Suspense>
  )
}

To use your own data layer instead of the SDK, see Levels of abstraction.