List renderer

Like default Hygraph fields, UI extensions can be configured to store multiple values.

To enable custom list rendering in your app, add FieldExtensionFeature.ListRenderer to the features array in the extension declaration.

import {
  FieldExtensionType,
  FieldExtensionFeature,
} from '@graphcms/uix-react-sdk';

const declaration = {
  extensionType: 'field',
  fieldType: FieldExtensionType.JSON,
  name: 'My custom JSON',
  features: [
    FieldExtensionFeature.FieldRenderer,
    FieldExtensionFeature.ListRenderer,
  ],
};

UI extensions declaration must be re-loaded every time the declaration changes.

Your extension will now need to be able to handle an array of values. A simple example of adding a new value would be to spread the array that you get back from the API and add your new value to it.

To check whether the current extension instance is a multiple-value field, use the field.isList boolean:

Native JS

React