Easily restore your project to a previous version with our new Instant One-click Backup Recovery
Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

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;