The RichText component allows the user to edit a multiline rich text.

It is very flexible, as it allows you to:

  • Choose the allowed rich text features (Bold, Italic, Code, Highlight, Link).
  • Provide your own components to render each marker.


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

interface RichTextProps {
propName: string
renderBlock: React.FC
placeholder: string
allowedFeatures?: types.RichTextFeatures[]
renderBold?: React.FC
renderItalic?: React.FC
renderHighlight?: React.FC
renderCode?: React.FC
renderLink?: React.FC
renderUL?: React.FC
renderOL?: React.FC
renderLI?: React.FC

Properties definition

propNameThe prop of the Brick component corresponding to this text.
renderBlockA React functional component used to render each paragraph of text.
placeholderThe placeholder to show when the text is empty.
allowedFeaturesAn array of allowed rich text features: the available features are BOLD, ITALIC, CODE, HIGHLIGHT, LINK, UL, OL.

You find them on the exported types.RichTextFeatures
renderBoldThe optional render function for the BOLD marker.
renderItalicThe optional render function for the ITALIC marker.
renderCodeThe optional render function for the CODE marker.
renderHighlightThe optional render function for the HIGHLIGHT marker.
renderLinkThe optional render function for the LINK marker.

Warning: this render function will override the default React Bricks Link component (which uses the configured renderLocalLink for local links and a <a> tag for external links).
renderULThe optional render function for Unordered Lists.
renderOLThe optional render function for Ordered Lists.
renderLIThe optional render function for List Items.

Usage example

renderBlock={(props: any) => (
className="text-lg sm:text-xl text-center"
placeholder="Type a text..."