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}
/>