Draft Mode Toast Component
Relevant source files
The following files were used as context for generating this wiki page:
The Draft Mode Toast Component is a client-side React component designed to provide visual feedback and control to users when the application is in Next.js Draft Mode. It informs the user that content is being served live from the Sanity Content Lake and provides an interface to disable this mode. This component is a key part of the project's native authoring experience, ensuring editors know when they are viewing unpublished or real-time updates rather than static production content.
Sources: app/(personal)/DraftModeToast.tsx:1-31, README.md:1-20
Architecture and Logic
The component is integrated into the global application layout and conditionally rendered based on the server-side state of Draft Mode. While the check for Draft Mode enablement happens on the server, the toast itself is a client component to handle browser-specific logic and user interactions.
Conditional Rendering and Layout Integration
The component is imported and used within the primary layout of the personal website. It is only rendered if draftMode().isEnabled is true. When active, it is paired with the VisualEditing component from next-sanity.
Presentation Tool Detection
To avoid redundant UI elements, the component uses the useIsPresentationTool hook. If the application is being viewed within the Sanity Studio's "Presentation" tool (typically via an iframe), the toast remains hidden. It only triggers when the user is viewing the site in Draft Mode in a standard browser window or preview popup.
Sources: app/(personal)/DraftModeToast.tsx:7-12
Implementation Details
Component Properties and Actions
The component receives a server action as a prop, which is executed when the user clicks the "Disable" button on the toast.
| Property | Type | Description |
|---|---|---|
action | () => Promise<void> | A server-side function that disables Draft Mode and includes a simulated delay for UI feedback. |
Sources: app/(personal)/DraftModeToast.tsx:7, app/(personal)/layout.tsx:68-76
Notification Lifecycle
The toast is managed using the sonner library. It is initialized with an Infinity duration to ensure it remains visible as long as Draft Mode is active. If the component unmounts—which occurs when Draft Mode is disabled and the layout re-renders—the toast is automatically dismissed.
Dependencies
The functionality relies on several key packages and configurations:
- sonner: Handles the UI rendering of the toast notification.
- next-sanity: Provides the
useIsPresentationToolhook andVisualEditingcapabilities. - Sanity Config: The
presentationToolinsanity.config.tsdefines the/api/draft-mode/enableendpoint used to trigger this state.
Sources: package.json:34, 44, sanity.config.ts:51
Conclusion
The DraftModeToast component serves as a bridge between the server-side Draft Mode state and the client-side user experience. By intelligently detecting the environment (standard browser vs. Presentation iframe) and providing a direct action to return to production view, it ensures a seamless and transparent workflow for content authors using the Sanity Studio integration.
Sources: app/(personal)/DraftModeToast.tsx:1-31, app/(personal)/layout.tsx:64-81