const patternsLengthValidations = [{
  validator: ({ value }) => {
    // The value are the "items" passed down in the children func
    if (value.length === 0) {
      return {
        message: 'You need to add at least one item',
      };
    }
  }
}];

export const MyComponent = () => {
  return (
    <UseArray path="patterns" validations={patternsLengthValidations}>
      {({ error, items, addItem, removeItem, form }) => {
        // error (string | null) is any validation message that came back
        // The form object is also returned so the consumer can decided _when_
        // to display the error (e.g. form.isSubmitted)
      }}
    </UseArray>
  );
};

export const MyComponent = () => {
  return (
    <UseArray path="patterns" validations={patternsLengthValidations}>
      {({ items, addItem, removeItem, moveItem }) => {
        // To reorder the item we will probably use the <EuiDragDropContext /> and <EuiDroppable />
        const onDragEnd = ({ source, destination }) => {
          if (source && destination) {
            moveItem(source.index, destination.index);
          }
        };
		
        return (
          <EuiDragDropContext onDragEnd={onDragEnd}>
            <EuiDroppable droppableId="1">
              {items.map(item => (
                ...
              ))}
            </EuiDroppable>
		  </EuiDragDropContext>
        );
      }}
    </UseArray>
  );
};