Select entries from a Contentful space.
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>;
},
},
},
};
Param | Example | Type | Status |
---|---|---|---|
contentType |
movies |
String | Required |
options |
{} |
Object | Required |
ID of the Contentful Content Type to query.
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 | - |
Your Contentful access token.
The id for the Contentful space that contains your content.
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.
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",
},
},
});
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
},
});
The field to use as the title for the selected item. Defaults to "title"
.
createFieldContentful("movies", {
// ...
titleField: "name",
});
An External field type that loads Contentful entries.
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> = {
// ...
};
MIT © Measured Corporation Ltd