List Renderer

Like default GraphCMS 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,
  ],
};

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:

init({
  declaration,
}).then((initialState) => {
  const { status, props } = initialState;
  if (status === 'ok') {
    const {
      value,
      onChange,
      field: { isList },
    } = props;
    const insertHandler = (newValue) => {
      if (isList) {
        onChange([...value, newValue]);
      } else {
        onChange(newValue);
      }
    };
  }
});

const {
  value,
  onChange,
  field: { isList },
} = useUiExtension();

const insertHandler = (newValue) => {
  if (isList) {
    onChange([...value, newValue]);
  } else {
    onChange(newValue);
  }
};