Skip to main content

Visual components with RSC

When using React Server Components, the visual components (Text, RichText, Image, File Repeater, Link) must be imported from react-bricks/rsc and they have a slightly different APIs, as we need to pass them the value of the prop.

Text

Add the value prop. You get it from the component's props. The type should be declared as ReactBricks.types.TextValue.

Before

import { Text } from 'react-bricks/frontend'

...
<Text
propName="title"
placeholder="Enter the title"
renderBlock={({ children}) => (
<p className="text-xl">
{children}
</p>
)}
>

After

import { Text } from 'react-bricks/rsc'

...
<Text
propName="title"
value={title}
placeholder="Enter the title"
renderBlock={({ children}) => (
<p className="text-xl">
{children}
</p>
)}
>

RichText

Add the value prop. You get it from the component's props. The type should be declared as ReactBricks.types.TextValue.

Before

import { RichText } from 'react-bricks/frontend'

...
<RichText
propName="title"
placeholder="Enter the title"
renderBlock={({ children}) => (
<h1 className="text-xl">
{children}
</h1>
)}
>

After

import { RichText } from 'react-bricks/rsc'

...
<RichText
propName="description"
value={description}
placeholder="Enter the description"
renderBlock={({ children}) => (
<p>
{children}
</p>
)}
allowedFeatures={[types.RichTextFeatures.Bold]},
>

Image

Add the source prop. You get it from the component's props. The type should be declared as ReactBricks.types.IImageSource.

Before

import { Image } from 'react-bricks/frontend'

...
<Image propName="avatar" alt="Avatar" />

After

import { Image } from 'react-bricks/rsc'

...
<Image
propName="avatar"
source={avatar}
alt="Avatar"
/>

File

Add the source prop. You get it from the component's props. The type should be declared as ReactBricks.types.IFileSource.

Before

import { File } from 'react-bricks/frontend'

...
<File propName="document" />

After

import { File } from 'react-bricks/rsc'

...
<File
propName="document"
source={document}
/>

Repeater

Add the items prop. You get it from the component's props.
The type should be declared as ReactBricks.types.RepeaterItems<T> where T (not mandatory) is the type of the single repeated item (you can import it from the repeated brick).
If you specify T, you have the result of getDefaultProps fully typed also for repeated items.

Before

import { Repeater } from 'react-bricks/frontend'

...
<Repeater propName="features" />

After

import { Repeater } from 'react-bricks/rsc'

...
<Repeater
propName="features"
items={features}
/>