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..."
        // multiline={false} : boolean
        // softLineBreak={false} : boolean
      />
    </div>
  )
}

Thumbnail.schema = {
  name: 'thumbnail',
  label: 'Thumbnail',
  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

... and has 2 optional props

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 getDefaultProps, which is a function that returns the default props for this brick when it is added. Then 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... 😎