@toloka-dev/tbx-external-field-client

@toloka-dev/tbx-external-field-client is a JavaScript/TypeScript library designed to facilitate communication and configuration management between Template Builder with Field.External and an external component.

Installation

npm install @toloka-dev/tbx-external-field-client

Option 1: React app

Root component:

import { ExternalFieldConnectionProvider } from '@toloka-dev/tbx-external-field-client';
import { createRoot } from 'react-dom/client';

import App from './app';

createRoot(document.getElementById('root')).render(
  <ExternalFieldConnectionProvider>
    <App />
  </ExternalFieldConnectionProvider>
);

Some other component:

import { useExternalField } from '@toloka-dev/tbx-external-field-client';

const App = () => {
  const { value, config, api } = useExternalField();

  return (
    <div>
      <div>{value}</div>
      <div>
        <button
          onClick={() => api.setValue((value ?? 0) + 1)}
          disabled={config.disabled}
        >
          increment
        </button>
      </div>
    </div>
  );
}

Option 1: JavaScript

import { createFieldExternalConnection } from '@toloka-dev/tbx-external-field-client';

const connection = createFieldExternalConnection()

connection.promise
  .then((api) => {
    api.setValue('foo');
  })
  .catch((error) => {
    console.error(error);
  })