feat: add `useIsLivePreview` & `useIsPresentationTool` hooks

The new hooks are higher level, and tailored to the use cases I've found is needed in most templates:

I want to show a UI warning that the app is in draft mode when outside of Presentation Tool, so editors don't freak out and think they've accidentally published some content.
In production it's awesome to show a "A new post is available" toast with a refresh button so that my visitors can consume my content in peace and decide when to see the new content. In live preview however I don't want my editors to constantly hit a refresh button toast every time they make a draft edit before they can see it.

I want to only show a Draft Mode message if I'm not in the Presentation Tool:

"use client";

import { useIsPresentationTool } from "next-sanity/hooks";
import { useEffect } from "react";
import { toast } from "sonner";
import { disableDraftMode } from "./actions";

export default function DraftModeToast() {
  const isPresentationTool = useIsPresentationTool();

  useEffect(() => {
    if(isPresentationTool === false) {
      toast("Draft Mode Enabled", {
        action: {
          label: "Disable",
          onClick: () => disableDraftMode(),
        },
      });
    }
  }, [isPresentationTool]);

  return null;
}

I want to delay layout shift in production, and passthrough in live preview:

"use client";

import { useIsLivePreview } from "next-sanity/hooks";
import { useEffect } from "react";
import { toast } from "sonner";
import { useDeferredLayoutShift } from "./use-deferred-transition";

/**
 * Suspends layout shift for the more stories section when a new post is published.
 * On changes it'll require opt-in form the user before the post is shown.
 * If the post itself is edited, it'll refresh automatically to allow fixing typos.
 */

export function MoreStoriesLayoutShift(props: {
  children: React.ReactNode;
  ids: string[];
}) {
  const [children, pending, startViewTransition] = useDeferredLayoutShift(
    props.children,
    props.ids,
  );
  const isLivePreview = useIsLivePreview();

  /**
   * We need to suspend layout shift for user opt-in.
   */
  useEffect(() => {
    if(pending && isLivePreview === false) {
      toast("More stories have been published", {
        id: "more-stories-layout-shift",
        duration: Infinity,
        action: {
          label: "Refresh",
          onClick: () => startViewTransition(),
        },
      });
    }
  }, [pending, isLivePreview, startViewTransition]);

  /**
   * If we're in Live Preview we want our editors to see their changes right away,
   * without requiring any user interactions, so they can preview on many screens and devices all at once
   */
  if(isLivePreview) {
    return props.children
  }

  return children;
}

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
live-visual-editing-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 24, 2024 2:38pm
visual-editing-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 24, 2024 2:38pm
visual-editing-page-builder-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 24, 2024 2:38pm
visual-editing-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 24, 2024 2:38pm

6 Skipped Deployments

sanity-io / visual-editing

feat: add `useIsLivePreview` & `useIsPresentationTool` hooks #2050