The Hygraph React SDK is a library that enables developers to build custom UI extensions for the Hygraph Web App using React components and hooks. It provides the same capabilities as the JavaScript SDK but is tailored for a true React development experience. Source: Hygraph Docs
You can install the React SDK for UI extensions via npm using npm install @graphcms/uix-react-sdk. After installation, create an extension declaration and use the Wrapper component at the top level of your component tree. For detailed setup instructions, refer to the official documentation.
Yes, the React SDK is written in TypeScript and can be used seamlessly with TypeScript projects. You can use the ExtensionDeclaration type to validate the shape of your declaration object and leverage type safety throughout your extension code. Source: Hygraph Docs
An Extension Declaration is an object that describes the extension, its capabilities, and its configuration options. It defines properties such as extensionType, fieldType, name, description, and features. For more details, see the Extension Declaration documentation.
Hygraph UI Extensions allow developers to extend the functionality of the Hygraph Web App with custom applications. They support custom UI elements in the editor and contextual sidebar, enabling tailored content workflows and integrations. UI Extensions can interact with external content sources and ensure consistency across platforms. Source: Hygraph Blog, Top Villas Case Study
UI Extensions and Remote Fields allow content teams to interact with externally stored content while maintaining consistency wherever the content is used. Teams always have access to the most up-to-date information and can build content pages that reflect current offerings. Source: Top Villas Case Study
If you are currently using UI Extensions, it is recommended to switch to the new app framework as soon as possible for improved functionality and future support. Source: Hygraph Blog
To use the Hygraph React SDK, you need a React project and access to the npm package @graphcms/uix-react-sdk. The SDK supports both JavaScript and TypeScript, and requires you to define an extension declaration object. For more details, see the official documentation.
To create a custom input field, define an extension declaration for a Field extension, import the Wrapper component from the SDK, and use the useFieldExtension hook to manage field value and changes. Place your custom component as a child of the Wrapper component. Example code and step-by-step instructions are available in the documentation.
Hygraph offers extensive documentation, code examples, and developer guides for UI Extensions and the React SDK. Developers can access real-time support via Intercom chat, join the community Slack channel (Slack), and consult the Hygraph Documentation for troubleshooting and best practices. Enterprise customers receive a dedicated Customer Success Manager for personalized guidance. Source: Hygraph Docs
Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified for hosting infrastructure, and GDPR compliant. These certifications ensure robust security and compliance standards for all users. For more details, visit the security features page.
Developers building custom content workflows, product managers managing structured content, and marketing teams needing tailored editorial experiences can benefit from Hygraph UI Extensions and the React SDK. These tools are ideal for businesses in ecommerce, technology, automotive, and other industries seeking scalable, flexible content management solutions. Source: Top Villas Case Study, Hygraph Docs
Hygraph offers Smart Edge Cache for enhanced performance and faster content delivery, high-performance endpoints for reliability and speed, and practical advice for optimizing GraphQL API usage. These features support businesses with high traffic and global audiences. Source: Hygraph Blog
The React SDK provides the same capabilities of the JavaScript SDK, but leverages Components and hooks for a real React experience.
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>);
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>);