ContentAudience

Shows its children only to their audience. Until the session is known, which includes the server render, the element is invisible but keeps its height. Relevance, not access control: every variant is in the page source.

import { ContentAudience } from "@evolve-storefront/feature-content-blocks/content-audience";

Renders inside ContentAudienceProvider.

Preview

DefaultOpen in Storybook ↗

Usage

A visitor who is not logged in: the block for customers is not rendered.

// In the site's root layout, inside the auth provider.
import { ContentAudienceProvider } from "@evolve-storefront/feature-content-blocks/content-audience";

const { isAuthenticated, loading } = useAuth();

<ContentAudienceProvider
  audiences={loading ? undefined : [isAuthenticated ? "LOGGED_IN" : "LOGGED_OUT"]}
>
  {children}
</ContentAudienceProvider>

Props

Prop	Type	Description
audience	AudienceType	Who the content is for. EVERYONE renders the children as they are.
children?	ReactNode

Change the layout

Pass children to ContentAudience to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-content-blocks/content-audience.

ContentAudienceToggleLets an editor switch the preview between the logged-out and the logged-in variant.

Prop	Type	Description
name?	string
disabled?	boolean
required?	boolean
readOnly?	boolean
invalid?	boolean
value?	PreviewAudience	The audience previewed, for a toggle the site controls.
defaultValue?	PreviewAudience	Where an uncontrolled toggle starts. LOGGED_OUT, as the preview starts.
onValueChange?	((audience: PreviewAudience) => void)

Any other props go to the root element, like on a plain HTML element.

Examples

LoadingThe session is not known yet: both blocks with an audience keep their height, invisible.

<ContentAudienceProvider audiences={undefined}>
  <ContentBlocks blocks={page.body} registry={defaultBlocks} />
</ContentAudienceProvider>

Open in Storybook ↗

Logged InA logged-in customer: the block for visitors who are not logged in is gone.

<ContentAudienceProvider audiences={["LOGGED_IN"]}>
  <ContentBlocks blocks={page.body} registry={defaultBlocks} />
</ContentAudienceProvider>

Open in Storybook ↗

Editor PreviewThe editor's preview: it starts on the visitor who is not logged in, and the toggle switches it to the logged-in customer and back.

// In the site's preview route.
const [previewAudience, setPreviewAudience] = useState<PreviewAudience>("LOGGED_OUT");

<ContentAudienceToggle value={previewAudience} onValueChange={setPreviewAudience} />
<ContentAudienceProvider audiences={isPreview ? [previewAudience] : sessionAudiences}>
  <ContentBlocks blocks={page.body} registry={defaultBlocks} />
</ContentAudienceProvider>

Open in Storybook ↗