Strapi Page Builder

https://pagebuilder.wc8.io/docs
Admin
Strapi Page Builder is a modular visual page editor for Strapi CMS, designed for React websites,...
Tokens:11,741
Snippets:128
Trust Score:4.7
Update:3 months ago
Show doc for...
Tokens:
Raw
### Start Next.js Development Server (npm)

Source: https://pagebuilder.wc8.io/docs

Command to start the Next.js development server using npm.

```bash
npm run dev
```

--------------------------------

### Start Next.js Development Server (pnpm)

Source: https://pagebuilder.wc8.io/docs

Command to start the Next.js development server using pnpm.

```bash
pnpm dev
```

--------------------------------

### Start Next.js Development Server (yarn)

Source: https://pagebuilder.wc8.io/docs

Command to start the Next.js development server using yarn.

```bash
yarn dev
```

--------------------------------

### Rebuild and Run Strapi Environment

Source: https://pagebuilder.wc8.io/docs/manual-installation

After installing the plugin, rebuild and run your Strapi development environment. This ensures the new plugin is recognized and loaded.

```bash
npm run build && npm run develop
```

--------------------------------

### Install Strapi Page Builder Plugin

Source: https://pagebuilder.wc8.io/docs/manual-installation

Install the Strapi Page Builder plugin using npm. This command should be run from the terminal within your Strapi project directory.

```bash
npm install @wecre8websites/strapi-page-builder
```

--------------------------------

### Install Strapi Page Builder React Library

Source: https://pagebuilder.wc8.io/docs/manual-installation

Install the Strapi Page Builder React library in your React project. This enables the use of Strapi Page Builder components within your React application.

```bash
npm install @wecre8websites/strapi-page-builder-react
```

--------------------------------

### Render Component Usage

Source: https://pagebuilder.wc8.io/docs/project-structure/render

This example demonstrates how to use the `<Render />` component in a Next.js page. It fetches content from Strapi and passes it along with configuration and Strapi details to the `Render` component. Ensure your Strapi configuration and environment variables are correctly set.

```javascript
import strapiConfig from "@/config/strapiConfig";
import { Render } from "@wecre8websites/strapi-page-builder-react";
import { notFound } from "next/navigation";
import config from "../../blocks/PageBuilderConfig";

const strapiConfig = {
  url: process.env.NEXT_PUBLIC_API_URL as string,
  authToken: process.env.STRAPI_ADMIN_TOKEN as string,
  imageUrl: process.env.NEXT_PUBLIC_IMAGE_URL as string,
}

export default async function Page({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;

  const { template, ...content } = await getCMSContent(locale)
  if (!template?.json || !content) return notFound();
  return <Render
    config={config}
    data={{
      templateJson: template.json,
      content
    }}
    strapi={{ ...strapiConfig, locale }} />;
}
```

--------------------------------

### Editor Component Usage

Source: https://pagebuilder.wc8.io/docs/project-structure/editor

Example of how to import and use the Editor component in a React application.

```APIDOC
## Editor Component

### Description
The `<Editor />` component is a React component provided by `@wecre8websites/strapi-page-builder-react` for building pages with Strapi.

### Props

Parameter| Description| Required  
---|---|---
`apiKey`| The API key for the Strapi Page Builder. Sign up for free.| true  
`config`| The configuration object for the Strapi Page Builder. See Editor Configuration.| true  
`strapi`| The configuration object for Strapi.| false  

### Strapi Configuration Object

Parameter| Description| Required  
---|---|---
`url`| The URL of the Strapi API.| true  
`authToken`| The authentication token for Strapi if required.| false  
`imageUrl`| The URL of the image server. Required if using the `media` field type| false  

### Example Usage
```jsx
import { Editor } from "@wecre8websites/strapi-page-builder-react";
import "@wecre8websites/strapi-page-builder-react/editor.css";
import { notFound } from "next/navigation";
import config from "../../blocks/PageBuilderConfig";

const strapiConfig = {
  url: process.env.NEXT_PUBLIC_API_URL as string,
  authToken: process.env.STRAPI_ADMIN_TOKEN as string,
  imageUrl: process.env.NEXT_PUBLIC_IMAGE_URL as string,
};

export default async function EditorPage({ searchParams }: { searchParams: Promise<{ _pagebuilderToken?: string }> }) {
  const { _pagebuilderToken } = await searchParams;
  if (!_pagebuilderToken) return notFound();
  return <Editor config={config} apiKey={process.env.PAGE_BUILDER_API_KEY as string} strapi={strapiConfig} />;
}
```
```

--------------------------------

### Next.js Editor Route Setup

Source: https://pagebuilder.wc8.io/docs/manual-installation

Create an editor route for Strapi Page Builder in a Next.js application. This page will host the visual editor for your content.

```typescript
import { Editor } from "@wecre8websites/strapi-page-builder-react";
import "@wecre8websites/strapi-page-builder-react/editor.css"
import { notFound } from "next/navigation";
import config from "../../blocks/config";

export default async function EditorPage({
  searchParams,
}: {
  searchParams: Promise<{ _pagebuilderToken?: string }>;
}) {
  const { _pagebuilderToken } = await searchParams;
  if (!_pagebuilderToken) return notFound();
  return (
    <Editor
      config={config}
      apiKey={process.env.PAGE_BUILDER_API_KEY as string}
      strapi={{
        url: process.env.STRAPI_URL as string,
        authToken: process.env.STRAPI_API_TOKEN as string,
        imageUrl: process.env.STRAPI_IMAGE_URL as string,
      }}
    />
  );
}
```

--------------------------------

### Next.js Render Component for Strapi Content

Source: https://pagebuilder.wc8.io/docs/manual-installation

Implement a render component in Next.js to display content managed by Strapi Page Builder. This example fetches homepage content and renders it using the provided configuration.

```typescript
import { Render } from "@wecre8websites/strapi-page-builder-react";
import { notFound } from "next/navigation";
import config from "../../blocks/config";

export const revalidate = 60;

const getHomepage = async (locale?: string) => {
  const queryUrl = new URL("http://localhost:1337/api/homepage");
  if (locale) queryUrl.searchParams.append("locale", locale);
  queryUrl.searchParams.append("populate", "*");
  const res = await fetch(queryUrl.toString(), {
    headers: {
      Authorization: `Bearer ${process.env.STRAPI_ADMIN_TOKEN}`,
    },
  });
  const { data } = await res.json();
  const { template, ...content } = data;
  return { template, ...content };
};

export default async function Page({
  params,
}: {
  params: Promise<{ locale: string; slug: string[] }>;
}) {
  const { locale } = await params;
  const { content, template } = await getHomepage(locale);

  if (!template.json || !content) return notFound();
  return (
    <Render config={config} data={{ templateJson: template.json, content }} />
  );
}
```

--------------------------------

### Dynamic Field Resolution with resolveFields

Source: https://pagebuilder.wc8.io/docs/project-structure/components/resolveFields

Use `resolveFields` to conditionally define component fields. This example shows how `mySnackField` options change based on the `myChoiceField` selection.

```typescript
import { ComponentConfig, Fields } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  myChoiceField: string;
  mySnackField?: string;
}
 
const snackFields = {
  sweet: [
    { value: "chocolate", label: "Chocolate" },
    { value: "candy", label: "Candy" },
  ],
  salty: [
    { value: "chips", label: "Chips" },
    { value: "popcorn", label: "Popcorn" },
  ]
} as { [key: string]: { value: string, label: string }[] }
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  resolveFields: ({ props }) => {
    const fields = {
      myChoiceField: {
        type: "radio",
        label: "My Choice Field",
        options: [
          { value: "sweet", label: "Sweet" },
          { value: "salty", label: "Salty" },
        ],
      },
    } satisfies Partial<Fields<MyComponentProps>>
    switch (props.myChoiceField) {
      case "sweet":
        return {
          ...fields,
          mySnackField: { type: "select", label: "My Snack Field", options: snackFields.sweet }
        }
      case "salty":
        return {
          ...fields,
          mySnackField: { type: "select", label: "My Snack Field", options: snackFields.salty }
        }
      default:
        return {
          ...fields,
          mySnackField: undefined,
        }
    }
  },
  defaultProps: {
    myChoiceField: "",
  },
  render: (props) => {
    return <p>Favourite snack: {props?.mySnackField}</p>
  }
}
```

--------------------------------

### Define an Object Field in a Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/object

Configure an object field within a component's configuration. This example defines an object field 'myFieldName' which contains 'src' and 'alt' sub-fields for image properties.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
import Image from "next/image";
 
export interface MyComponentProps {
  myFieldName: {
    src: string;
    alt: string;
  }
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "object",
      label: "My Field Name",
      objectFields: {
        src: { type: "media", label: "Image", mediaType: "image" },
        alt: { type: "text", label: "Alt text"}
      },
    },
  },
  defaultProps: {
    myFieldName: {
      src: "",
      alt: ""
    },
  },
  label: "My Component",
  render: (props) => {
    return <div className="relative w-48 h-48">
      {props.myFieldName?.src
        ? <Image src={process.env.NEXT_PUBLIC_IMAGE_URL + props.myFieldName} layout="fill" objectFit="cover" alt={props.myFieldName?.alt || ""} />
        : null}
    </div>
  }
}
```

--------------------------------

### Custom resolveData for Strapi Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/resolveData

This example demonstrates how to define a custom `resolveData` function for a Strapi component. It fetches menu data from an external API based on a document ID and locale, then merges it into the component's props. This overwrites the default `resolveData` behavior for the 'strapi' field type.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  menu: { menuItems: { path: string, title: string }[] } | null
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    menu: {
      type: "strapi",
      label: "Main menu",
      contentType: "plugin::navigation.navigation",
      titleField: "name",
    }
  },
  defaultProps: {
    menu: null,
  },
  resolveData: async (data: any, { metadata }: any) => {
    const locale = metadata?.locale;
    const documentId = data?.props?.menu?.documentId;
    if (!documentId) return data;
    const menu = await fetch(`${process.env.NEXT_PUBLIC_API_URL as string}/navigation/render/${documentId}?type=TREE${locale ? `&locale=${locale}` : ""}`);
    const menuJson = await menu.json();
    return {
      ...data,
      props: {
        ...data.props,
        menu: {
          ...data.props.menu,
          menuItems: menuJson
        }
      }
    }
  },
  render: (props) => <ul>
    {props.menu?.menuItems?.map((item, index) => (
      <li key={index}><a href={item.path}>{item.title}</a></li>
    ))}
  </ul>,
}
```

--------------------------------

### Create Next.js App with Page Builder Demo (npm)

Source: https://pagebuilder.wc8.io/docs

Use this command to set up a new Next.js 15 environment using the preconfigured Strapi Page Builder demo template with npm.

```bash
npx create-next-app@latest web \
--example https://github.com/wecre8websites/strapi-page-builder-demo
```

--------------------------------

### Create Next.js App with Page Builder Demo (yarn)

Source: https://pagebuilder.wc8.io/docs

Use this command to set up a new Next.js 15 environment using the preconfigured Strapi Page Builder demo template with yarn.

```bash
yarn dlx create-next-app@latest web \
--example https://github.com/wecre8websites/strapi-page-builder-demo
```

--------------------------------

### Create Strapi App with Page Builder Template (npm)

Source: https://pagebuilder.wc8.io/docs

Use this command to set up a new Strapi environment with the preconfigured Strapi Page Builder template using npm.

```bash
npx create-strapi-app@latest cms \
--template https://github.com/wecre8websites/strapi-page-builder-cms
--template-branch master
```

--------------------------------

### Create Next.js App with Page Builder Demo (pnpm)

Source: https://pagebuilder.wc8.io/docs

Use this command to set up a new Next.js 15 environment using the preconfigured Strapi Page Builder demo template with pnpm.

```bash
pnpm dlx create-next-app@latest web \
--example https://github.com/wecre8websites/strapi-page-builder-demo
```

--------------------------------

### Build and Develop Strapi (npm)

Source: https://pagebuilder.wc8.io/docs

Commands to build and run the Strapi development environment using npm.

```bash
npm run build
pm run develop
```

--------------------------------

### Initialize Strapi Page Builder Editor

Source: https://pagebuilder.wc8.io/docs/project-structure/editor

Import and render the `<Editor />` component with necessary configurations. Ensure the `_pagebuilderToken` is present in search parameters; otherwise, a 404 is returned. API keys and Strapi configuration are passed as props.

```javascript
import { Editor } from "@wecre8websites/strapi-page-builder-react";
import "@wecre8websites/strapi-page-builder-react/editor.css"
import { notFound } from "next/navigation";
import config from "../../blocks/PageBuilderConfig";
 
const strapiConfig = {
  url: process.env.NEXT_PUBLIC_API_URL as string,
  authToken: process.env.STRAPI_ADMIN_TOKEN as string,
  imageUrl: process.env.NEXT_PUBLIC_IMAGE_URL as string,
}
 
export default async function EditorPage({ searchParams }: { searchParams: Promise<{ _pagebuilderToken?: string }> }) {
  const { _pagebuilderToken } = await searchParams;
  if (!_pagebuilderToken) return notFound();
  return <Editor config={config} apiKey={process.env.PAGE_BUILDER_API_KEY as string} strapi={strapiConfig} />
}
```

--------------------------------

### Build and Develop Strapi (yarn)

Source: https://pagebuilder.wc8.io/docs

Commands to build and run the Strapi development environment using yarn.

```bash
yarn build
yarn develop
```

--------------------------------

### Create Strapi App with Page Builder Template (pnpm)

Source: https://pagebuilder.wc8.io/docs

Use this command to set up a new Strapi environment with the preconfigured Strapi Page Builder template using pnpm.

```bash
pnpm dlx create-strapi-app@latest cms \
--template https://github.com/wecre8websites/strapi-page-builder-cms \
--template-branch master
```

--------------------------------

### Create Strapi App with Page Builder Template (yarn)

Source: https://pagebuilder.wc8.io/docs

Use this command to set up a new Strapi environment with the preconfigured Strapi Page Builder template using yarn.

```bash
yarn dlx create-strapi-app@latest cms 
--template https://github.com/wecre8websites/strapi-page-builder-cms
--template-branch master
```

--------------------------------

### Build and Develop Strapi (pnpm)

Source: https://pagebuilder.wc8.io/docs

Commands to build and run the Strapi development environment using pnpm.

```bash
pnpm build
pnpm develop
```

--------------------------------

### Comprehensive Page Builder Configuration

Source: https://pagebuilder.wc8.io/docs/project-structure/config

Configures multiple components, organizes them into categories, and defines root component settings. This structure is suitable for complex sites with many components.

```typescript
'use client'
import { Config } from "@wecre8websites/strapi-page-builder-react";
import { CategoriesConfig } from "./Categories/config";
import { FeaturedCategoryConfig } from "./FeaturedCategory/config";
import { FeaturedProductsConfig } from "./FeaturedProducts/config";
import { TestimonialGridConfig } from "./TestimonialGrid/config";
import { TestimonialItemProps } from "./TestimonialItem/component";
import { TestimonialItemConfig } from "./TestimonialItem/config";
import { RootProps } from "./Root/component";
import { RootConfig } from "./Root/config";
import { HeroProps } from "./Hero/component.client";
import { HeroConfig } from "./Hero/config";
import { TestimonialGridProps } from "./TestimonialGrid/component";
import { FeaturedProductsProps } from "./FeaturedProducts/component";
import { CategoriesProps } from "./Categories/component";
import { FeaturedCategoryProps } from "./FeaturedCategory/component";
 
type PageBuilderBlocks = {
  Hero: HeroProps,
  FeaturedProducts: FeaturedProductsProps,
  Categories: CategoriesProps,
  FeaturedCategory: FeaturedCategoryProps,
  TestimonialGrid: TestimonialGridProps,
  TestimonialItem: TestimonialItemProps,
}
 
type Categories = "heros" | "features" | "testimonials";
 
const config: Config<PageBuilderBlocks, RootProps, Categories> = {
  components: {
    Hero: HeroConfig,
    FeaturedProducts: FeaturedProductsConfig,
    Categories: CategoriesConfig,
    FeaturedCategory: FeaturedCategoryConfig,
    TestimonialGrid: TestimonialGridConfig,
    TestimonialItem: TestimonialItemConfig
  },
  categories: {
    heros: { title: "Heros", components: ["Hero"] },
    features: { title: "Features", components: ["FeaturedProducts", "Categories", "FeaturedCategory"] },
    testimonials: { title: "Testimonials", components: ["TestimonialGrid", "TestimonialItem"] }
  },
  root: RootConfig
}
 
export default config;
```

--------------------------------

### Rendering CMS Content with Render Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/content-data

Illustrates how to use the `<Render/>` component to display CMS content. This component requires data to be passed as a prop, as it does not fetch data independently.

```typescript
export default async function Page({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const { template, ...content } = await getCMSContent(locale)
  if (!template?.json || !content) return notFound();
  return <Render
    config={config}
    data={{
      templateJson: template.json,
      content
    }}
    strapi={{ ...strapiConfig, locale }} />;
}
```

--------------------------------

### Global Component Configuration

Source: https://pagebuilder.wc8.io/docs/project-structure/components

Integrates the Text component configuration into the global Strapi Page Builder configuration. This file serves as the central point for registering all custom components.

```typescript
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;
```

--------------------------------

### Configure a Text Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components

Sets up the configuration for the Text component, defining its editable fields, default properties, and the rendering logic. This configuration is used by the page builder to create the visual editor interface.

```typescript
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} />
}
```

--------------------------------

### Basic Component Configuration

Source: https://pagebuilder.wc8.io/docs/project-structure/config

Defines a single text component with a text field, default value, and custom rendering. Use this for simple component definitions.

```typescript
import { Config } from "@wecre8websites/strapi-page-builder-react";
 
interface Blocks {
  TextComponent: { text: string },
}
 
export const config: Config<Blocks, {}, "basic" | "other"> = {
  components: {
    TextComponent: {
      fields: {
        text: { type: "text" },
      },
      defaultProps: {
        text: "Visually editable text",
      },
      render: (data) => <div style={{ padding:"6rem" }}>{ data.text }</div>
    },
  },
  root: {}
}
```

--------------------------------

### Configuring React Component with processProps

Source: https://pagebuilder.wc8.io/docs/project-structure/components/content-data

Shows how to configure a React component to process external data and targeted props using the `processProps` helper function. This is necessary for rendering Handlebars content.

```typescript
import { ComponentConfig, FieldLabel, processProps } from "@wecre8websites/strapi-page-builder-react";

export interface MyComponentProps {
  myFieldName: string;
}

export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "text",
      label: "My Field Name",
    },
  },
  defaultProps: {
    myFieldName: "",
  },
  render: ({ puck: { metadata }, ...props }) => {
    const { myFieldName } = processProps(props, metadata);
    return <p>{myFieldName}</p>
  }
}
```

--------------------------------

### Configure Text Field Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/text

Defines the configuration for a text field component, including its type, label, default properties, and rendering logic. Use this to create custom text input fields.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  myFieldName: string
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: { type: "text", label: "My Field Name" },
  },
  defaultProps: {
    myFieldName: "The quick brown fox jumps over the lazy red dog.",
  },
  label: "My Component",
  render: (props) => {
    return <p>{props.myFieldName}</p>
  }
}
```

--------------------------------

### Strapi Page Builder React Configuration

Source: https://pagebuilder.wc8.io/docs/manual-installation

Define the configuration for Strapi Page Builder in a React project. This includes defining custom components and their fields, default properties, and rendering logic.

```typescript
import { Config } from "@wecre8websites/strapi-page-builder-react";

interface Blocks {
  TextComponent: { text: string },
}

export const config: Config<Blocks, {}, "basic" | "other"> = {
  components: {
    TextComponent: {
      fields: {
        text: { type: "text" },
      },
      defaultProps: {
        text: "Visually editable text",
      },
      render: (data) => <div style={{ padding:"6rem" }}>{ data.text }</div>
    },
  },
  root: {}
}
```

--------------------------------

### Correct Render Function Implementation

Source: https://pagebuilder.wc8.io/docs/project-structure/components/render

Implement the render function to return a JSX element that displays component data. Ensure it accepts props and returns valid JSX.

```javascript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  myFieldName: string;
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: { type: "text", label: "My Field Name" },
  },
  defaultProps: {
    myFieldName: "The quick brown fox jumps over the lazy red dog.",
  },
  label: "My Component",
  render: (props) => {
    return <p>{props.myFieldName}</p>;
  },
};

```

--------------------------------

### Accessing Page Title with Handlebars

Source: https://pagebuilder.wc8.io/docs/project-structure/components/content-data

Demonstrates how to access the 'title' field of the page content using Handlebars syntax within the Strapi Page Builder editor.

```handlebars
{{title}}
```

--------------------------------

### Configure Select Field in Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/select

Define a select field with options for a React component configuration. Ensure the 'options' array is provided with 'value' and 'label' for each choice.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  myFieldName: string;
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "select",
      label: "My Field Name",
      options: [
        { value: "first", label: "First option" },
        { value: "second", label: "Second option" },
        { value: "third", label: "Third option" },
      ]
    },
  },
  defaultProps: {
    myFieldName: "first",
  },
  label: "My Component",
  render: (props) => {
    return <p>{props.myFieldName}</p>
  }
}
```

--------------------------------

### Configure Media Field in React Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/media

Defines a React component configuration for a media field, specifying its type, media type, label, and default properties. The render function displays an Image component if a media field value is present.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
import Image from "next/image";
 
export interface MyComponentProps {
  myFieldName: string;
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "media",
      mediaType: "image",
      label: "My Field Name",
    },
  },
  defaultProps: {
    myFieldName: "",
  },
  label: "My Component",
  render: (props) => {
    return <div className="relative w-48 h-48">
      {props.myFieldName
        ? <Image src={process.env.NEXT_PUBLIC_IMAGE_URL + props.myFieldName} layout="fill" objectFit="cover" alt="" />
        : null}
    </div>
  }
}
```

--------------------------------

### Define a Custom Field Component Configuration

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/custom

Use this configuration to define a custom field for Strapi Page Builder. The `render` function specifies the JSX for the field, and `FieldLabel` can be used for consistent labeling and icons. This is useful when default field types do not meet your needs.

```typescript
import { ComponentConfig, FieldLabel } from "@wecre8websites/strapi-page-builder-react";

export interface MyComponentProps {
  myFieldName: string;
}

export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "custom",
      label: "My Field Name",
      render: ({ field, name, onChange, value }) => {
        return <FieldLabel label={field.label || name} icon={<>i</>}>
          <input
            type="text"
            value={value}
            onChange={(e) => onChange(e.target.value)}
            placeholder="Enter some text"
            className="w-full py-2 px-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </FieldLabel>
      },
    },
  },
  defaultProps: {
    myFieldName: "",
  },
  render: (props) => {
    return <p>{props.myFieldName}</p>
  }
}
```

--------------------------------

### Define a Text Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components

Defines the React component for displaying text, including its props and basic structure. Ensure 'data.text' is used instead of 'props.text' for accessing the text content.

```typescript
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>
}
```

--------------------------------

### Configure Strapi Field

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/strapi

Defines a Strapi field for selecting a content entry. Use `contentType` to specify the Strapi collection and `titleField` if the default 'name' or 'title' is not suitable.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
import { Product } from "../../types/Product";

export interface MyComponentProps {
  myFieldName: Product | null;
}

export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "strapi",
      contentType: "api::product.product",
      titleField: "title",
      label: "My Field Name",
      populate: [
        "populate[0]=localizations",
        "populate[1]=media"
      ]
    },
  },
  defaultProps: {
    myFieldName: null,
  },
  label: "My Component",
  render: (props) => {
    return <pre>
      {JSON.stringify(props.myFieldName || "{}", null, 2)}
    </pre>
  }
}
```

--------------------------------

### Incorrect Render Function Implementation

Source: https://pagebuilder.wc8.io/docs/project-structure/components/render

Avoid assigning JSX directly to the render property. The render function must be a callable function that returns JSX.

```javascript
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  ..., // other fields
  render: <p>{props.myFieldName}</p>
};

```

--------------------------------

### Configure Color Field in Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/color

Defines a 'color' type field within a component configuration. Use this to add a color picker to your components.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  myFieldName: string;
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "color",
      label: "My Field Name",
    },
  },
  defaultProps: {
    myFieldName: "#000000",
  },
  label: "My Component",
  render: (props) => {
    return <div style={{ background: props.myFieldName }} />
  }
}
```

--------------------------------

### Define and Render Rich Text Field

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/richtext

Defines a Rich Text field for a component and demonstrates how to render its content using BlocksRenderer. Ensure BlocksContent and BlocksRenderer are imported from @strapi/blocks-react-renderer.

```typescript
import { BlocksContent, BlocksRenderer } from "@strapi/blocks-react-renderer";
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";

export interface MyComponentProps {
  myFieldName: BlocksContent
}

export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: { type: "richtext", label: "My Field Name" },
  },
  defaultProps: {
    richtext: [
      {
        type: 'paragraph',
        children: [{ type: "text", text: 'The quick brown fox jumps over the lazy red dog.' }],
      },
    ],
  },
  label: "My Component",
  render: (props) => {
    return <BlocksRenderer content={props.richtext} />
  }
}
```

--------------------------------

### Configure Number Field in Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/number

Defines a custom component with a number field. Use this to create input fields for numerical data within your Strapi Page Builder.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  myFieldName: number
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: { type: "number", label: "My Field Name", min: 0, max: 100 },
  },
  defaultProps: {
    myFieldName: 10,
  },
  label: "My Component",
  render: (props) => {
    return <p>{props.myFieldName}</p>
  }
}
```

--------------------------------

### Textarea Field Configuration

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/textarea

Defines a textarea field within a component configuration. This snippet shows how to set the field type to 'textarea', provide a label, and set default properties for the component.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";

export interface MyComponentProps {
  myFieldName: string
}

export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: { type: "textarea", label: "My Field Name" },
  },
  defaultProps: {
    myFieldName: "The quick brown fox jumps over the lazy red dog.",
  },
  label: "My Component",
  render: (props) => {
    return <p>{props.myFieldName}</p>
  }
}
```

--------------------------------

### Configure Array Field in Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/array

Define an array field for a Strapi Page Builder component. Use `arrayFields` to specify the structure of items within the array and `getItemSummary` to set how each item is displayed in the editor.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  myFieldName: { myArrayFieldName: string }[];
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "array",
      label: "My Field Name",
      arrayFields: {
        myArrayFieldName: {
          type: "text",
          label: "My Array Field",
        },
      },
      min: 0,
      max: 6,
      getItemSummary: (item) => item.myArrayFieldName,
      defaultItemProps: { myArrayFieldName: "My Array Item" },
    },
  },
  defaultProps: {
    myFieldName: [{ myArrayFieldName: "My Array Item" }],
  },
  label: "My Component",
  render: (props) => {
    return <ul>
      {props.myFieldName.map((item, index) => <li key={index}>{item.myArrayFieldName}</li>)}
    </ul>
  }
}
```

--------------------------------

### Configure Slider Field in React Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/slider

Defines a React component configuration for a slider field, specifying its type, label, min/max values, step, and default properties.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  myFieldName: number
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: { type: "slider", label: "My Field Name", min: 0, max: 100, step: 5 },
  },
  defaultProps: {
    myFieldName: 10,
  },
  label: "My Component",
  render: (props) => {
    return <p>{props.myFieldName}</p>
  }
}
```

--------------------------------

### Configure Radio Field in Component

Source: https://pagebuilder.wc8.io/docs/project-structure/components/fields/radio

Defines a radio field for a Strapi Page Builder component. Use this to create a field with predefined options for users to select from.

```typescript
import { ComponentConfig } from "@wecre8websites/strapi-page-builder-react";
 
export interface MyComponentProps {
  myFieldName: boolean;
}
 
export const MyComponentConfig: Omit<ComponentConfig<MyComponentProps, MyComponentProps>, "type"> = {
  fields: {
    myFieldName: {
      type: "radio",
      label: "My Field Name",
      options: [
        { value: false, label: "Disabled" },
        { value: true, label: "Enabled" },
      ]
    },
  },
  defaultProps: {
    myFieldName: true,
  },
  label: "My Component",
  render: (props) => {
    return <p>{props.myFieldName}</p>
  }
}
```
Tokens:
Raw