React SDK

The React SDK profides the same capabilities of the JavaScript SDK, but leverages Components and hooks for a real React experience.

Setup the SDKAnchor

The React SDK for UI extensions is available as an npm package.

npm install @graphcms/uix-react-sdk

Next, create an extension declaration. Let's assume you are building a custom input for a Field extension, overriding a String field:

const declaration = {
extensionType: 'field',
fieldType: 'STRING',
name: 'My first custom input',
description: '',
features: ['FieldRenderer'],
};

Import the Wrapper component from the SDK, and use it at the top-level of your components tree:

import { Wrapper } from '@graphcms/uix-react-sdk';
// const declaration = ...
const App = () => (
<Wrapper declaration={declaration}>{/* Your component tree here */}</Wrapper>
);

Create the component that will interact with GraphCMS using the useUiExtension hook.

import { useUiExtension } from '@graphcms/uix-react-sdk';
const MyField = () => {
const { value, onChange } = useUiExtension();
return (
<input value={value} onChange={(event) => onChange(event.target.value)} />
);
};

Use the MyField component as a child of the Wrapper component:

import { Wrapper, useUiExtension } from '@graphcms/uix-react-sdk';
import { MyField } from './my-field.js';
// const declaration = ...
const MyField = () => {
const { value, onChange } = useUiExtension();
return (
<input value={value} onChange={(event) => onChange(event.target.value)} />
);
};
const App = () => (
<Wrapper declaration={declaration}>
<MyField />
</Wrapper>
);

Using TypeScriptAnchor

The React SDK is written in TypeScript, and can be used with TypeScript projects.

import {
Wrapper,
useUiExtension,
FieldExtensionDeclaration,
FieldExtensionType,
FieldExtensionFeature,
} from '@graphcms/uix-sdk';
// use the ExtensionDeclaration type to validate the shape of your declaration object
const declaration: FieldExtensionDeclaration = {
extensionType: 'field',
fieldType: FieldExtensionType.STRING,
name: 'My first custom input',
description: '',
features: [FieldExtensionFeature.FieldRenderer],
};
// Create a new type from your declaration object.
type MyExactDeclarationType = typeof declaration;
// And give it to the hook, allowing it do dynamically type the returned props, reflecting your extension configuration.
const MyField = () => {
const { value, onChange } = useUiExtension<MyExactDeclarationType>();
return (
<input value={value} onChange={(event) => onChange(event.target.value)} />
);
};
const App = () => (
<Wrapper declaration={declaration}>
<MyField />
</Wrapper>
);

Next StepsAnchor

Did you find this page useful?

Your feedback helps us improve our docs, and product.