List renderer

Like default Hygraph fields, the fields in an app can be configured to store multiple values.

To enable custom list rendering in exteyour app, add ListRenderer to the features field in the Elements tab of the app registration process.

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 },
} = useFieldExtension();

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

List renderer

Get started