UI extensions can interact with the other fields of the form, and with the form itself.

For these purposes, the form property exposes the following methods:

#Types

Internally, Hygraph uses final-form to manage form and field states.

#FormState

See FormState on final-form.

The FormSubscription param has the same shape as FormState, but using a boolean to describe which state changes you want to subscribe to.

subscribeToFormState((state) => console.log(state.dirty, state.errors), {
  // react only to form `dirty` and `invalid` state changes
  dirty: true,
  invalid: true,
});

#FieldState

See FormState on final-form.

The FieldSubscription param has the same shape as FieldState, but using a boolean to describe which state changes you want to subscribe to.

subscribeToFieldState('title', (state) => console.log(state.value), {
  // react only to field `value` changes
  value: true,
});

#Unsubscribe

Both subscribeToFieldState and subscribeToFormState return a function to be called when needing to unsubscribe from changes. In order to avoid perfomance issues, make sure to unsubscribe any existing subscription before subscribing again.

Example in React:

React.useEffect(() => {
  let unsubscribe;

  subscribeToFieldState('title', (state) => console.log(state.value), {
    value: true,
  }).then((fieldUnsubscribe) => (unsubscribe = fieldUnsubscribe));

  return () => {
    unsubscribe?.();
  };
}, []);

#Set fields visibility

type VisibilityMap = {
  [fieldApiId: string]: 'READ_ONLY' | 'HIDDEN' | 'READ_WRITE';
};

Using object form to set visibility for field with API ID fieldApiId

setFieldsVisibility({
  fieldApiId: 'READ_ONLY',
});

Using callback to calculate next visibility value for field with API ID fieldApiId

setFieldsVisibility((currentVisibilityMap) => {
  const nextVisibilityValue =
    currentVisibilityMap[fieldApiId] === 'READ_ONLY'
      ? 'READ_WRITE'
      : 'READ_ONLY';

  return {
    fieldApiId: nextVisibilityValue,
  };
});