Text

The Text component enables content editors to edit plain text.

Required properties:

• propName: the name of the prop
• value: prop’s value (strictly needed only for RSC, but it’s avisable to always provide it for server componenents compatibility)
• renderBlock: the render function for this text (the render function for this text (not strictly required; if missing, it renders a simple <span>)

Usage example

// from 'react-bricks/rsc' for usage with server components
import { types, Text } from 'react-bricks/frontend'

interface MyBrickProps {
  title: types.TextValue
}

const MyBrick: types.Brick<MyBrickProps> = ({ title }) => (
  ...
  <Text
    propName="title"
    value={title}
    renderBlock={({ children }) => (
      <h1 className="text-xl font-extrabold">{children}</h1>
    )}
    placeholder="Title..."
  />
  ...
)

MyBrick.schema = { ... }

export default MyBrick

Multi-line

By default, editors can enter a single line of text in a Text component. You can change this behavior by setting the following props:

• multiline (false by default): it allows entering multiple lines, each rendering the JSX returned by the renderBlock function
• softLineBreak (false by default): if true, it allows entering a soft line break (<br />) using shift+enter

Bind to Meta data or Custom fields

A Text component is typically used to save a text value for the current block in the page.

You can also bind it to a page’s custom field or meta field by replacing propName with customFieldName or metaFieldName. This creates a two-way data binding between the visual editing component and the values you can enter via the sidebar controls in the “Page” tab.

This feature is useful, for example, when you want the title of a hero unit on the page to also set the meta title of the page directly.

Properties

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

// Props for all the usages of Text
interface BaseTextProps {
  renderBlock?: (props: RenderElementProps) => JSX.Element
  placeholder?: string
  renderPlaceholder?: (props: { children: any }) => JSX.Element
  multiline?: boolean
  softLineBreak?: boolean
}

// Usage with propName (usual case)
interface TextPropsWithPropName extends BaseTextProps {
  propName: string
  value?: types.TextValue
  metaFieldName?: never
  customFieldName?: never
}

// Usage when binding to a Meta Field
interface TextPropsWithMetaFieldName extends BaseTextProps {
  propName?: never
  value?: never
  metaFieldName: 'title' | 'description' | 'language'
  customFieldName?: never
}

// Usage when binding to a Custom Field
interface TextPropsWithCustomFieldName extends BaseTextProps {
  propName?: never
  value?: never
  metaFieldName?: never
  customFieldName: string
}

/**
 * Props for Text component
 */
type TextProps =
  | TextPropsWithPropName
  | TextPropsWithMetaFieldName
  | TextPropsWithCustomFieldName

Properties definition

Property	Definition
propName	The prop of the Brick component corresponding to this text. Mandatory unless you bind the value to a metaFieldName or customFieldName
value	The value of the prop for this text. Required for Server Components, but always recommended for RSC compatibility
renderBlock	A React functional component used to render the text.
placeholder	The placeholder to show when the text is empty.
renderPlaceholder	A React functional component used to render the placeholder, for custom display.
multiline	Default: false. If true allows multiline text.
softLineBreak	Default: false. If true allows soft line breaks.
metaFieldName	Binds the text value to a page Meta field (two-way data binding)
customFieldName	Binds the text value to a page Custom field (two-way data binding)

Usage with Server Components

When working with Server Components, you need to import from 'react-bricks/rsc':

import { types, Text } from 'react-bricks/rsc'