Extension Hook

import { useUiExtension } from '@graphcms/uix-react-sdk';
const MyComponent = () => {
const { value, onChange, isExpanded, expand } = useUiExtension();
// ... rest of your component

As all communication between GraphCMS and the extension is asynchronous, all methods provided by the hook return Promises.

contextAllProvides information about your project and current environment, endpoints and access tokens
extensionAllObject containing status and configuration of the extension
formField, SidebarObject containing methods to read state and values from the form and its fields, and to change the value of any field
modelField, SidebarExtended description of the current model
fieldFieldExtended description of the current field
nameFieldName of the field in the form (may be generated and differ from it's actual apiId)
localeFieldCurrent locale of the field, if the field is localized
valueFieldCurrent value of the field in GraphCMS
onChangeFieldCallback to update the value of the field in GraphCMS
metaFieldContains status of the current field: active, touched, error, etc
openAssetPickerFieldOpens GraphCMS Asset picker in a dialog, and returns a promise resolving with the selected asset url.
isExpandedAllBoolean that is true if the extension is currently displayed in fullscreen mode
expandAllMethod to enter or leave fullscreen mode

Type DefintionAnchor

export interface ExtensionType {
// name of the field in the form (may differ from field apiId)
name: string;
// current locale on localized field
locale?: string;
// field state sync
value: any;
onChange: <T extends HTMLElement = HTMLElement>(event: ChangeEvent<T> | any) => Promise<void>;
onFocus: <T extends HTMLElement = HTMLElement>(event?: FocusEvent<T>) => Promise<void>;
onBlur: <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;
// fullscreen mode
isExpanded?: boolean;
expand?: (expand: boolean) => unknown;
// open the asset picker (see the Asset type in your Content Api)
openAssetPicker: () => Promise<null | Asset>;
// access to the form state and other form fields
form?: {
change: <Value = any>(name: string, value: Value) => Promise<void>;
// see https://final-form.org/docs/final-form/types/FormState
getState: <Values = Record<string, any>>() => Promise<FormState<Values>>;
// see https://final-form.org/docs/final-form/types/FieldState
getFieldState: <Value = any>(fieldName: string) => Promise<FieldState<Value>>;
// details about the current model
model?: {
apiId: string;
apiIdPlural: string;
id: string;
description: string | null;
displayName: string;
isLocalized: boolean;
// details about the current field
field?: {
id: string;
apiId: string;
description: string | null;
displayName: string;
isList: boolean;
isLocalized?: boolean;
isRequired?: boolean;
isUnique?: boolean;
isPreview: boolean; // true when in version or stage comparison view
type: FieldExtensionType;
// information needed to be able to use the project api's
context: {
project: {
id: string;
name: string;
// management api access
mgmtApi: string;
mgmtToken: string;
environment: {
id: string;
name: string;
// content api access
endpoint: string;
authToken: string;
// extension status
extension: {
config: Record<string, any>;
status: "connected" | "connecting" | "error" | "disconnected";

Did you find this page useful?

Your feedback helps us improve our docs, and product.