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-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],
};

// 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