# React SDK

Learn more about our React SDK, which provides the same capabilities of the JavaScript SDK, but leverages Components and hooks for a real React experience.

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](https://www.npmjs.com/package/@graphcms/uix-react-sdk).

```bash
npm install @graphcms/uix-react-sdk
```

Next, create an [extension declaration](https://hygraph.com/classic-docs/ui-extensions/getting-started/extension-declaration).
Let's assume you are building a custom input for a [Field extension](https://hygraph.com/classic-docs/ui-extensions/field-extension/declaration), overriding a String field:

```js
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:

```js
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.

```js
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:

```js
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.

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