Develop you app's sidebar elements

To create the element, create a file inside pages and name it google-serp-preview.tsx with the following content:

import { Wrapper } from '@hygraph/app-sdk-react';

export default function GoogleSerpPreview() {
  return <Wrapper>// here goes your custom sidebar code</Wrapper>;
}

In this example, you are naming the file google-serp-preview.tsx because at the time of registering the app you used http://localhost:3000/google-serp-preview as your URL.

Adding React SDK

Now, let's import some SDK components and hooks from Hygraph SDK.

Start with importing the Wrapper component and useFormSidebarExtension hook from the library inside your React application.

You should add the following code at the top of the google-serp-preview.tsx file.

// Add this at the top of your google-serp-preview.tsx file

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

Then, add useFormSidebarExtension hook into SerpPreview and adjust the code accordingly, like the following example:

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};

Finally, let's wrap our custom input field with the Wrapper component. Remember to pass in declaration:

const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;

Your complete custom sidebar code should look like this:

// this is the complete code

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};

const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;

Finally, you should import your custom React component to App.js.

// App.js

import GoogleSerpPreview from './extensions/GoogleSerpPreview';

function App() {
  return (
    <div className="App">
      <GoogleSerpPreview />
    </div>
  );
}

export default App;