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