#JavaScript SDK

<script src="https://www.unpkg.com/@graphcms/zoid/lib/zoid.min.js"></script>
<script src="https://www.unpkg.com/@graphcms/uix-sdk@0.2.7/dist/gcuix.umd.production.min.js"></script>

npm install @graphcms/uix-sdk

const declaration = {
  extensionType: 'field',
  fieldType: 'STRING',
  name: 'My first custom input',
  description: '',
  features: ['FieldRenderer'],
};

<input type="text" id="myCustomInput" />

// we need a reference to the input element
const myInput = document.getElementById('myCustomInput');

init({
  declaration,
  onProps: (newProps) => {
    // each time Hygraph send new props, we update the displayed value to the new one
    const { value } = newProps;
    myInput.value = value;
  },
}).then((initialState) => {
  const { status, props } = initialState;
  if (status === 'ok') {
    // this will only be called once
    const { value, onChange } = props;

    // we initialize the input with the previously saved value, or a default one if there is none
    myInput.value = value || '';

    // each time we change the input value, we notify Hygraph of the change
    myInput.addEventListener('change', (e) => onChange(e.target.value));
  }
});

import {
  init,
  FieldExtensionDeclaration,
  FieldExtensionType,
  FieldExtensionFeature,
} from '@graphcms/uix-sdk';

// validate the shape of your declaration object by
const declaration: FieldExtensionDeclaration = {
  extensionType: 'field',
  fieldType: FieldExtensionType.STRING,
  name: 'My first custom input',
  description: '',
  features: [FieldExtensionFeature.FieldRenderer],
};

// Create a new type from your declaration object.
type MyExactDeclarationType = typeof declaration;

// And give it to the init function, allowing it do dynamically type the props transmitted by Hygraph to reflect your extension configuration.
init<MyExactDeclarationType>({
  declaration,
  onProps: (newProps) => {
    // newProps is now typed
    const { value } = newProps;
    myInput.value = value;
  },
}).then((initialState) => {
  const { status, props } = initialState; // initialState is now typed
  if (status === 'ok') {
    // props is now typed
    const { value, onChange } = props;
  }
});