Skip to content

Commit

Permalink
Add props table for custom field input components (#1851)
Browse files Browse the repository at this point in the history 
* Add props table for custom field input components

* Update docusaurus/docs/dev-docs/custom-fields.md

---------

Co-authored-by: Pierre Wizla <[email protected]>
  • Loading branch information
@markkaylor @pwizla
markkaylor and pwizla authored Sep 21, 2023
1 parent 741d6d3 commit a9c13b4
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions docusaurus/docs/dev-docs/custom-fields.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,24 @@ export default {

</details>

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.

<details>
Expand Down

1 comment on commit a9c13b4

@vercel
Copy link

@vercel vercel bot commented on a9c13b4 Sep 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

documentation – ./

docs-vercel-v4.strapi.io
documentation-git-main-strapijs.vercel.app
documentation-strapijs.vercel.app

Please sign in to comment.