Join us live as we unveil the all new Hygraph Studio!

Hygraph
Docs

Field element API reference

function useFieldExtension(): FieldExtensionProps;
export interface FieldExtensionProps extends ExtensionPropsBase {
// name of the field in the form (may differ from the field apiId, ie. for localized fields)
name: string;
// current locale on localized field
locale?: string;
// id of the current entry, null on a new entry.
entryId: string | null;
isTableCell: boolean;
value: any;
onBlur: <T extends HTMLElement = HTMLElement>(
event?: FocusEvent<T>,
) => Promise<void>;
onChange: <T extends HTMLElement = HTMLElement>(
event: ChangeEvent<T> | any,
) => Promise<void>;
onFocus: <T extends HTMLElement = HTMLElement>(
event?: FocusEvent<T>,
) => Promise<void>;
// @see https://final-form.org/docs/react-final-form/types/FieldRenderProps
meta: {
active: boolean;
error: any;
touched: boolean;
};
// access to the form state and other form fields
form: Form;
// details about the current field
field: {
id: string;
apiId: string;
description: string | null;
displayName: string;
isList: boolean;
isLocalized?: boolean;
isRequired?: boolean;
isUnique?: boolean;
// true when in version or stage comparison view
isPreview: boolean;
type: FieldExtensionType;
};
// details about the current model
model: Model;
// configuration of the extension.
extension: {
config: Record<string, any>;
fieldConfig: Record<string, any>;
tableConfig: Record<string, any>;
};
// whether the field is currently in fullscreen mode
isExpanded: boolean;
// set fullscreen mode
expand: (expand: boolean | ((isExpanded: boolean) => boolean)) => void;
}