In our Thumbnail
brick, let's change the "Thumbnail" text with a visual editable Text from React Bricks:
// Thumbnail.tsximport React from 'react'import { types, Text } from 'react-bricks/frontend'const Thumbnail: types.Brick = () => {return (<div className="p-6 text-center"><TextpropName="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 textrenderBlock
: a functional component rendering the textplaceholder
: the text to show when the text is empty... and has 2 optional props
multiline
: a boolean value that allows multiline textsoftLineBreak
: if set to true allows soft line breaks.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... 😎
Be the first to discover our latest news. No spam, promise.