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>
  );
}