<Slot>

This component fetches and renders the content of a  Slot, serving as the declarative equivalent of the useContent hook.

Example

Here is a basic example of how to use this component:

import {Slot} from '@croct/plug-react';

export function HomeHero() {
  return (
    <Slot id="home-hero">
      {content => (
        <div>
          <strong>{content.title}</strong>
          <p>{content.subtitle}</p>
          <a href={content.button.link}>{content.button.label}</a>
        </div>
      )}
    </Slot>
  );
}

For more examples, see Content rendering.

Attributes

The following list describes the supported parameters:

id

string

The ID of the slot to fetch.

You can specify the version of the slot by passing a versioned ID in the form id@version. For example, passing home-hero@1 will fetch the content for the home-hero slot in version 1. Not specifying a version number is the same as passing home-hero@latest, which will load the content for the latest version.

Best practice

Always specify a version to ensure the front end receives content with the expected structure despite future schema changes.

For more information, see  Slot versioning.

children

(content: JSON)=>ReactNode

A function that receives the slot content and returns the rendered React node.

For a detailed example, refer to the Declarative snippet in the Content rendering guide.

initial(optional)

JSON

An initial value to render while loading the actual value.

This value is required for server-side rendering. For client-side rendering, not specifying this value will cause rendering to suspend, requiring a <Suspense> boundary to handle the loading state.

fallback(optional)

JSON

A fallback value to render in case of an error.

If not specified, the error is thrown on failure.

expiration(optional)

number

The cache expiration time in milliseconds, extended on every render.

If negative, the cache never expires. By default, the cache expires after 60 seconds.

The SDK caches the result of the evaluation to prevent network requests on concurrent renders and re-renders.

Default:60000

cacheKey(optional)

string

A unique key to identify the cache entry.

By default, the cache key is the ID of the slot. However, you can specify a unique cache key to force re-evaluation even if the query and attributes are the same.

preferredLocale(optional)

string

The locale code to fetch the content.

Good to know

You can set a default locale for your application during SDK initialization, eliminating the need to specify it every call.

The code consists of a two-part string that specifies the language and, optionally, the country. For example, en represents English, en-us stands for English (United States), and pt-br for Portuguese (Brazil). It is case-insensitive and supports both hyphens and underscores as separators to accommodate the different conventions used by browsers, libraries, and other systems.

If no content is available in the preferred locale, the default locale content is returned instead.

Default:default locale

timeout(optional)

number

The maximum fetch time in milliseconds.

Good to know

You can set a default timeout for your application during SDK initialization, eliminating the need to specify it every call.

Once reached, the SDK will abort the request and reject the promise with a timeout error.

attributes(optional)

object

The map of attributes to inject in the evaluation context.

The attributes can be referenced in audience conditions using the context variable. For example, suppose you pass the following attributes:

{cities: ["New York", "San Francisco"]}

You can then reference them in queries like:

context's cities include location's city

For more information, see Context variables.

The following restrictions apply to the attributes:

• Up to 30 entries and 5 levels deep
• Keys can be either numbers or non-empty strings with a maximum length of 50 characters
• Values can be null, numbers, booleans, strings (up to 50 characters), or nested maps
• Nested maps follow the same constraints for keys and values