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/frontend'

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 2 props:

• propName: the name of the prop for text
• renderBlock: a functional component rendering the text

... and it has 3 optional props (plus other more advanced props that we don't need 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.

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/frontend'

interface ThumbnailProps {
  title: types.TextValue
}

const Thumbnail: types.Brick = () => {
  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:

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