Skip to main content

Text

The Text component allows the user to edit plain text.

📌

For usage with Next /App Router, please read the React Server Components Guide.

Properties​

Here's the Typescript interface for the props of the Text component:

interface TextProps {
  propName?: string
  renderBlock: React.FC
  placeholder: string
  renderPlaceholder?: React.FC
  multiline?: boolean
  softLineBreak?: boolean
  metaFieldName?: 'title' | 'description' | 'language' // New in 3.3.0
  customFieldName?: string // New in 3.3.0
}

Properties definition​

PropertyDefinition
propNameThe prop of the Brick component corresponding to this text. Mandatory unless you bind the value to a metaFieldName or customFieldName
renderBlockA React functional component used to render the text.
Typically it wraps the children.
placeholderThe placeholder to show when the text is empty.
renderPlaceholderA React functional component used to render the placeholder, if you need to change the default display.
multilineDefault: false. If set to true allows multiline text.
softLineBreakDefault: false. If set to true allows soft line breaks.
metaFieldNameBind the text value to a page Meta field (2-way data binding)
customFieldNameBind the text value to a page Custom field (2-way data binding)

Usage example​

<Text
  propName="description"
  renderBlock={(props: any) => (
    <p className="text-xl font-extrabold" {...props.attributes}>
      {props.children}
    </p>
  )}
  placeholder="Enter the description..."
/>