Component basics

Component file

src/blocks/Text/TextComponent.tsx


import { FC } from 'react';
import { DefaultComponentProps } from '@wecre8websites/strapi-page-builder-react';
 
export interface TextProps extends DefaultComponentProps {
  text: string
}
 
export const TextComponent: FC<TextProps> = ({ puck: { metadata }, ...props }) => {
  const { text } = props
  return <p>{data.text}</p>
}

Component configuration

src/blocks/Text/TextConfig.tsx


import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
import { TextComponent, TextProps } from "./TextComponent";
 
export const TextConfig: ComponentConfig<TextProps> = {
  fields: {
    text: { type: "text" },
  },
  defaultProps: {
    text: "Visually editable text",
  },
  render: (data) => <TextComponent {...data} />
}

Global configuration

Now that the component is organised into modules, the config file looks like this

src/blocks/config.tsx


import { Config, DefaultRootProps } from "@wecre8websites/strapi-page-builder-react";
import { TextConfig } from "./Text/TextConfig";
import { TextComponent, TextProps } from "./Text/TextComponent";
 
interface RootProps extends DefaultRootProps {}
 
interface Blocks {
  Text: TextProps
}
 
const config: Config<Blocks, RootProps> = {
  components: {
    Text: TextConfig,
  },
  root: { }
}
 
export default config;

Component Definition

Parameter	Description	Required
`label`	Friendly name to identify the component within the visual editor	FALSE
`fields`	Field definitions for the visual editor	FALSE
`defaultProps`	Default values pre-populated when adding the component to the editor	FALSE
`inline`	Removes the wrapper component for use with advanced CSS layouts	FALSE
`resolveFields()`	Dynamically update the fields available on the component	FALSE
`resolveData()`	Dynamically update the values on the component	FALSE
`render()`	Final React component to be rendered	TRUE