Sanity App SDK
    Preparing search index...

    Function useDocumentPreview

    • Returns the preview values of a document (specified via a DocumentHandle), including the document’s title, subtitle, media, and status. These values are live and will update in realtime. To reduce unnecessary network requests for resolving the preview values, an optional ref can be passed to the hook so that preview resolution will only occur if the ref is intersecting the current viewport.

      Parameters

      • options: useDocumentPreviewOptions

        The document handle for the document you want to resolve preview values for, and an optional ref

      Returns useDocumentPreviewResults

      The preview values for the given document and a boolean to indicate whether the resolution is pending

      // PreviewComponent.jsx
      export default function PreviewComponent({ document }) {
        const { data: { title, subtitle, media }, isPending } = useDocumentPreview({ document })
        return (
          <article style={{ opacity: isPending ? 0.5 : 1}}>
            {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}
            <h2>{title}</h2>
            <p>{subtitle}</p>
          </article>
        )
      }

      // DocumentList.jsx
      const { data } = useDocuments({ filter: '_type == "movie"' })
      return (
        <div>
          <h1>Movies</h1>
          <ul>
            {data.map(movie => (
              <li key={movie._id}>
                <Suspense fallback='Loading…'>
                  <PreviewComponent document={movie} />
                </Suspense>
              </li>
            ))}
          </ul>
        </div>
      )

    Settings

    Member Visibility