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.

Before​

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

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

After​

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

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