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

Develop you app's field elements

To create the element, create a file inside pages and name it custom-field.tsx with the following content:

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


export default function CustomField() {
  return (
    <Wrapper>
      <label for="custom_field">Custom Field:</label>
      <input id="custom_field" placeholder="Type something here" type="text" />
    </Wrapper>
  );
}

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

Adding React SDK

Let's import some SDK components, hooks and enumerations from Hygraph SDK.

Start with importing useFieldExtension hook from the library inside your React application.

You should add the following code at the top of the custom-field.tsx file, under the wrapper. Remember to import useEffect hook at the top.

// Add this at the top of your custom-field.tsx file


import { useState, useEffect } from 'react';


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

Then, add useFieldExtension hook into MyField and adjust the code accordingly, like the following example:

function MyCustomField() {
  const { value, onChange } = useFieldExtension();
  const [localValue, setLocalValue] = useState(value || '');


  useEffect(() => {
    onChange(localValue);
  }, [localValue, onChange]);


  return (
    <>
      <label for="custom_field">Custom Field:</label>
      <input
        id="custom_field"
        value={localValue}
        onChange={(e) => setLocalValue(e.target.value)}
      />
    </>
  );
}

Finally, let's wrap our custom input field with the Wrapper component:

export default function CustomField() {
  return (
    <Wrapper>
      <MyCustomField />
    </Wrapper>
  );
}

Your complete custom app element should look like this:

// this is the complete code


import { useState, useEffect } from 'react';


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


function MyCustomField() {
  const { value, onChange } = useFieldExtension();
  const [localValue, setLocalValue] = useState(value || '');


  useEffect(() => {
    onChange(localValue);
  }, [localValue, onChange]);


  return (
    <>
      <label for="custom_field">Custom Field:</label>
      <input
        id="custom_field"
        value={localValue}
        onChange={(e) => setLocalValue(e.target.value)}
      />
    </>
  );
}
export default function CustomField() {
  return (
    <Wrapper>
      <MyCustomField />
    </Wrapper>
  );
}