Try for free

Time for visual editing

Add a Text component

In our Thumbnail brick, let's change the "Thumbnail" text with a visual editable Text from React Bricks:

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

Now, when you add a Thumbnail, you'll see a "New text" title.
But the real news here is that you can click on the text and edit it directly! Isn't it cool?

The Text component needs 3 props:

  • propName: the name of the prop for text
  • renderBlock: a functional component rendering the text
  • placeholder: the text to show when the text is empty

Default content

Where does the "New text" come from?
It is the default text for a Text component where no default is provided. Let's fix it!

Go to the schema static property and add a good default for our title prop:

// 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.
Yes, I know you chose another text... 😎

Docs reference
» The Text component
Time to get points

The default value for a Text field is

Subscribe to our newsletter!

Be the first to discover our latest news. No spam, promise.