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 Hygraph using the Extension hook.

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

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

import { Wrapper, useFieldExtension } from '@graphcms/uix-react-sdk';
import { MyField } from './my-field.js';
// const declaration = ...
const MyField = () => {
const { value, onChange } = useFieldExtension();
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,
useFieldExtension,
FieldExtensionDeclaration,
FieldExtensionType,
FieldExtensionFeature,
} from '@graphcms/uix-react-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],
};
const MyField = () => {
const { value, onChange } = useFieldExtension();
return (
<input value={value} onChange={(event) => onChange(event.target.value)} />
);
};
const App = () => (
<Wrapper declaration={declaration}>
<MyField />
</Wrapper>
);

Next StepsAnchor