From a9c13b4491b2f5d0b4afe6f8d83741039fb2e17b Mon Sep 17 00:00:00 2001 From: markkaylor Date: Thu, 21 Sep 2023 12:03:06 +0200 Subject: [PATCH] Add props table for custom field input components (#1851) * Add props table for custom field input components * Update docusaurus/docs/dev-docs/custom-fields.md --------- Co-authored-by: Pierre Wizla --- docusaurus/docs/dev-docs/custom-fields.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docusaurus/docs/dev-docs/custom-fields.md b/docusaurus/docs/dev-docs/custom-fields.md index 0a85be60c7..4a9f129af5 100644 --- a/docusaurus/docs/dev-docs/custom-fields.md +++ b/docusaurus/docs/dev-docs/custom-fields.md @@ -189,6 +189,24 @@ export default { +Custom field input components receive the following props: + +| Prop | Description | Type | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | +| `attribute` | The attribute object with custom field's underlying Strapi type and options | `{ type: String, customField: String }` | +| `description` | The field description set in [configure the view](/user-docs/content-manager/configuring-view-of-content-type#configuring-the-edit-view) | [`IntlObject`](https://formatjs.io/docs/react-intl/) | +| `placeholder` | The field placeholder set in [configure the view](/user-docs/content-manager/configuring-view-of-content-type#configuring-the-edit-view) | [`IntlObject`](https://formatjs.io/docs/react-intl/) | +| `hint` | The field description set in [configure the view](/user-docs/content-manager/configuring-view-of-content-type#configuring-the-edit-view) along with min/max [validation requirements](/dev-docs/backend-customization/models#validations) | `String` | +| `name` | The field name set in the content-type builder | `String` | +| `intlLabel` | The field name set in the content-type builder or configure the view | [`IntlObject`](https://formatjs.io/docs/react-intl/) | +| `onChange` | The handler for the input change event. The `name` argument references the field name. The `type` argument references the underlying Strapi type | `({ target: { name: String value: unknown type: String } }) => void` | +| `contentTypeUID` | The content-type the field belongs to | `String` | +| `type` | The custom field uid, for example `plugin::color-picker.color` | `String` | +| `value` | The input value the underlying Strapi type expects | `unknown` | +| `required` | Whether or not the field is required | `boolean` | +| `error` | Error received after validation | [`IntlObject`](https://formatjs.io/docs/react-intl/) | +| `disabled` | Whether or not the input is disabled | `boolean` | + As of Strapi v4.13.0, fields in the Content Manager can be auto-focussed via the `URLSearchParam` `field`. It's recommended that your input component is wrapped in React's [`forwardRef`](https://react.dev/reference/react/forwardRef) method; you should pass the corresponding `ref` to the `input` element.