Time to add visual editing

Add a Text component

In our Thumbnail brick, let's change the "Thumbnail" text with a visual editable Text from React Bricks. The H1 tag will become the render function of the Text component:

// Thumbnail.tsx
import { types, Text } from 'react-bricks/rsc'
interface ThumbnailProps {
title: types.TextValue
}
const Thumbnail: types.Brick<ThumbnailProps> = ({ title }) => {
return (
<div className="p-6 text-center">
<Text
propName="title"
value={title}
renderBlock={({ children }) => <h1 className="text-2xl font-bold">{children}</h1>}
/>
</div>
)
}
Thumbnail.schema = {
name: 'thumbnail',
label: 'Thumbnail',
}
export default Thumbnail

Now, when you add a Thumbnail, you'll see the "Type a text..." placeholder.
And you can click on this text text and edit it directly! Isn't it cool?

The Text component requires 3 props:

  • propName: the name of the prop for text
  • value: the value of the prop (strictly required only for Server Components)
  • renderBlock: a functional component rendering the text

... and it has 3 optional props (plus some other props that we won't see now):

  • placeholder: a string with the custom placeholder when there is no text
  • multiline: a boolean value that allows multiline text
  • softLineBreak: if set to true allows soft line breaks.
Hint
The value prop is needed only for compatibility with Server Components, but it's better to always pass it, even if you are not using RSC for the current project, so that bricks are already compatible with the Next.js App Router, in case you'd like to use it in the future.

Custom placeholder

The "Type a title..." text is the default placeholder when a placeholder is not specified. Let's add a custom placeholder:

// Thumbnail.tsx
import { types, Text } from 'react-bricks/rsc'
interface ThumbnailProps {
title: types.TextValue
}
const Thumbnail: types.Brick<ThumbnailProps> = ({ title }) => {
return (
<div className="p-6 text-center">
<Text
propName="title"
value={title}
renderBlock={({ children }) => <h1 className="text-2xl font-bold">{children}</h1>}
placeholder="Type a title..."
/>
</div>
)
}
Thumbnail.schema = {
name: 'thumbnail',
label: 'Thumbnail',
}
export default Thumbnail

Now when you add the brick, you'll get the "Type a title..." placeholder.

Default content

It could be useful to have some default content for our Text component when the brick is added to the page.

Go to the schema property and add getDefaultProps, which is a function that returns the default props for this brick when it is added to the page. Then return a good default for our title prop. You see that the result of the getDefaultProps function is correctly because we passed our brick's interface as "generic" to the Brick type.

// Thumbnail.tsx
...
Thumbnail.schema = {
name: 'thumbnail',
label: 'Thumbnail',
getDefaultProps: () => ({
title: 'Hello, world!'
}),
sideEditProps: [],
}
export default Thumbnail

Now you see that when you add a new Thumbnail, the Hello, world! text appears. And editors can then change it as they like.

Docs reference
» The Text component
# Time to get points

To define the render function of a Text component you use...