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

  • multiline: a boolean value that allows multiline text
  • softLineBreak: if set to true allows soft line breaks.
  • 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... 😎

    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.