Components
Rich text

Rich text <ContzaRichText />

React component that renders a block with text with many different formattings such as bold, italic, lists, images, etc.

Props

childrenName of the field
nameAlternative way to specify the name of the field (can be overrided by 'children' prop)
placeholderPlaceholder text when editing the text (default: 'Enter Field Name...')
componentsDefines how different elements are rendered. For example you can add styles or custom attributes to the elements.

Examples

Here are a few examples how to use RichText component.

Basic usage

import { ContzaRichText } from "@contza/react";
 
const Component = () => {
  return (
    <ContzaRichText>Content</ContzaRichText>
  );
};
 
export default Component;

Using the "name" prop

import { ContzaRichText } from "@contza/react";
 
const Component = () => {
  return (
    <ContzaRichText name="Content" />
  );
};
 
export default Component;

Render custom element

import { ContzaRichText } from "@contza/react";
 
const Component = () => {
  return (
    <ContzaRichText
      name="Content"
      components={{
        h1: (props) => <h1 style={{ fontSize: "10rem" }}>{props.children}</h1>
      }}
   />
  );
};
 
export default Component;
ListRaw text