# \<ExternalDataProvider />

Integrates external stores with `Reactive Data Client`. Should be placed as high as possible
in application tree as any usage of the hooks is only possible for components below the provider
in the React tree.

> **Warning**
>
> **Is a replacement for [\<DataProvider />](https://dataclient.io/docs/api/DataProvider.md) - do _NOT_ use both at once**

## Usage

```tsx title="index.tsx"
import { ExternalDataProvider } from '@data-client/react/redux';
import { createRoot } from 'react-dom/client';

import { store, selector, controller } from './store';
import App from './App';

createRoot(document.body).render(
  <ExternalDataProvider
    store={store}
    selector={selector}
    controller={controller}
  >
    <App />
  </ExternalDataProvider>,
);
```

See [redux example](https://dataclient.io/docs/guides/redux.md) for a more complete example.

## Props

### store

```typescript
interface Store<S> {
  subscribe(listener: () => void): () => void;
  getState(): S;
}
```

Store simply needs to conform to this interface. A common implementation is a [redux store](https://redux.js.org/api/store),
but theoretically any external store could be used.

[Read more about integrating redux.](https://dataclient.io/docs/guides/redux.md)

### selector

```typescript
(state: S) => State<unknown>
```

This function is used to retrieve the `Reactive Data Client` specific part of the store's state tree.

### controller

[Controller](https://dataclient.io/docs/api/Controller.md) instance to use.

### devButton

In development, a small button will appear that gives easy access to browser devtools if
installed. This option configures where it shows up, or if null will disable it altogether.

`'bottom-right' | 'bottom-left' | 'top-right'| 'top-left' | null` = `'bottom-right'`

```tsx title="Disable button"
import { ExternalDataProvider } from '@data-client/react/redux';
import { store, selector, controller } from './store';
import App from './App';

<ExternalDataProvider
  store={store}
  selector={selector}
  controller={controller}
  devButton={null}
>
  <App />
</ExternalDataProvider>;
```

```tsx title="Place in top right corner"
import { ExternalDataProvider } from '@data-client/react/redux';
import { store, selector, controller } from './store';
import App from './App';

<ExternalDataProvider
  store={store}
  selector={selector}
  controller={controller}
  devButton="top-right"
>
  <App />
</ExternalDataProvider>;
```