> ## Documentation Index
> Fetch the complete documentation index at: https://docs.runmorph.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Connection.Provider

> The `Connection.Provider` component provides connection context and state management for Morph connection components.

The `Connection.Provider` component manages connection state and provides context for all connection-related components. It provides:

* Centralized connection state management
* Translation context for internationalization
* Session token management
* Connection data sharing

## Installation

```bash theme={null}
yarn add @runmorph/atoms
```

## Usage

<CodeGroup>
  ```typescript Basic.tsx theme={null}
  "use client"
  import { Connection } from "@runmorph/atoms";

  function App({ sessionToken }) {
      return (
          <Connection.Provider sessionToken={sessionToken}>
              <YourConnectionComponents />
          </Connection.Provider>
      );
  }

  export default App;
  ```

  ```typescript WithTranslations.tsx theme={null}
  "use client"
  import { Connection } from "@runmorph/atoms";

  function AppWithTranslations({ sessionToken }) {
      const translations = {
          'connect.status.loading': 'Connecting...',
          'connect.status.authorized': 'Connected',
          'connect.actions.connect': 'Connect',
          'connect.actions.reauthorize': 'Reconnect'
      };

      const t = (key: string) => translations[key] || key;

      return (
          <Connection.Provider
              sessionToken={sessionToken}
              t={t}
          >
              <YourConnectionComponents />
          </Connection.Provider>
      );
  }

  export default AppWithTranslations;
  ```
</CodeGroup>

## Props

<ResponseField name="sessionToken" type="string" required>
  The session token used to identify and manage the connection.
</ResponseField>

<ResponseField name="children" type="ReactNode" required>
  The child components that will have access to the connection context.
</ResponseField>

<ResponseField name="t" type="TranslationFunction">
  <Expandable title="properties">
    <ResponseField name="function">
      A translation function that receives a key and optional variables and
      returns the translated string.
    </ResponseField>

    <ResponseField name="parameters">
      * key: The translation key to look up - vars: Optional variables for
        string interpolation
    </ResponseField>

    <ResponseField name="returns">
      The translated string or the original key if no translation is found
    </ResponseField>
  </Expandable>
</ResponseField>

## Context Values

The connection context provides:

* `sessionToken`: The current session token
* `t`: The translation function if provided
* `settings`: Any connection settings
* `status`: The current connection status

## Internationalization

The provider supports translation keys for:

* Connection status messages
* Action buttons
* Error messages
* UI elements