@sanity/collaboration

@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 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.

Contributing

Local development, where new exports go, and the release process are in CONTRIBUTING.md.