# @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

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

## Option 1: React app

Root component:

```jsx
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:

```jsx
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

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

const connection = createFieldExternalConnection()

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