Function useDocumentEvent

Example: Creating a custom hook for document event toasts

import {createDatasetHandle, type DatasetHandle, type DocumentEvent, useDocumentEvent} from '@sanity/sdk-react'
import {useToast} from './my-ui-library'

// Define options for the custom hook, extending DatasetHandle
interface DocumentToastsOptions extends DatasetHandle {
  // Could add more options, e.g., { includeEvents: DocumentEvent['type'][] }
}

// Define the custom hook
function useDocumentToasts({...datasetHandle}: DocumentToastsOptions = {}) {
  const showToast = useToast() // Get the toast function

  // Define the event handler logic to show toasts on specific events
  const handleEvent = (event: DocumentEvent) => {
    if (event.type === 'published') {
      showToast(`Document ${event.documentId} published.`)
    } else if (event.type === 'unpublished') {
      showToast(`Document ${event.documentId} unpublished.`)
    } else if (event.type === 'deleted') {
      showToast(`Document ${event.documentId} deleted.`)
    } else {
      // Optionally log other events for debugging
      console.log('Document Event:', event.type, event.documentId)
    }
  }

  // Call the original hook, spreading the handle properties
  useDocumentEvent({
    ...datasetHandle, // Spread the dataset handle (projectId, dataset)
    onEvent: handleEvent,
  })
}

function MyComponentWithToasts() {
  // Use the custom hook, passing specific handle info
  const specificHandle = createDatasetHandle({ projectId: 'p1', dataset: 'ds1' })
  useDocumentToasts(specificHandle)

  // // Or use it relying on context for the handle
  // useDocumentToasts()

  return <div>...</div>
}
Copy