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

Hygraph
Docs

React SDK

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

#Setup the SDK

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 TypeScript

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>
);