Text

To edit a simple text in real-time in the page builder.

Property type

The Text component will interact with a string property of your Block.

Component properties

interface TextProps 
  slug: string;
  value: string;
  className?: string;
  style?: React.CSSProperties
  tagName?: string;
}

slug: The slug name of the block property to edit.
value: needs to pass the value of the property itself.
tagName: HTML tag surrounding the text, default: 'p'.

Example

import { SuncelBlock } from "@suncel/nextjs";
import { Text } from "@suncel/nextjs/components";

interface MyComponentProps {
  slug: string;
}

export const MyComponent: SuncelBlock<MyComponentProps> = ({ slug }) => {
  return <Text slug='slug' value={slug} tagName='span'/>;
};

...

Richtext

Image