field-contentful

Select entries from a Contentful space.

Quick start

npm i @measured/puck-field-contentful

import createFieldContentful from "@measured/puck-field-contentful";

const config = {
  components: {
    Example: {
      fields: {
        movie: createFieldContentful("movies", {
          space: "my_space",
          accessToken: "abcdefg123456",
        }),
      },
      render: ({ data }) => {
        return <p>{data?.fields.title || "No data selected"}</p>;
      },
    },
  },
};

Args

| Param | Example | Type | Status | | ----------------------------- | -------- | ------ | -------- | | contentType | movies | String | Required | | options | {} | Object | Required |

Required args

contentType

ID of the Contentful Content Type to query.

options

| Param | Example | Type | Status | | ------------------------------------------ | --------------------------------------- | --------------------------------------------------------------- | ------------------------------ | | accessToken | "abc123" | String | Required (unless using client) | | space | "my-space" | String | Required (unless using client) | | client | createClient() | ContentfulClientApi | - | | filterFields | { "rating[gte]": { type: "number" } } | Object | - | | initialFilters | { "rating[gte]": 1 } | Object | - | | titleField | "name" | String | - |

options.accessToken

Your Contentful access token.

options.space

The id for the Contentful space that contains your content.

options.client

A Contentful client as created by the contentful Node.js package. You can use this instead of accessToken and space if you want to reuse your client, or customise it more fully.

options.filterFields

An object describing which filterFields to render and pass the result directly to Contentful as search parameters.

createFieldContentful("movies", {
  // ...
  filterFields: {
    // Filter the "rating" field by value greater than the user input
    "fields.rating[gte]": {
      type: "number",
    },
  },
});

options.initialFilters

The initial values for the filters defined in filterFields. This data is passed directly directly to Contentful as search parameters.

createFieldContentful("movies", {
  // ...
  initialFilters: {
    "fields.rating[gte]": 1,
    select: "name,rating", // Can include search parameters not included in filterFields
  },
});

options.titleField

The field to use as the title for the selected item. Defaults to "title".

createFieldContentful("movies", {
  // ...
  titleField: "name",
});

Returns

An External field type that loads Contentful entries.

TypeScript

You can use the Entry type for data loaded via Contentful:

import createFieldContentful, { Entry } from "@/field-contentful";

type MyProps = {
  Example: {
    movie: Entry<{ title: string; description: string; rating: number }>;
  };
};

const config: Config<MyProps> = {
  // ...
};

License

MIT © Measured Corporation Ltd