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

# Using with React

> Use react webhook to automatically push data

react-ton-x is a React library for building applications connected with Tonhub.

* Wrap root component with the provider.
* Store connection state.
* Use **useTonhubConnect** hook without thinking about managing the connection state.

# react-ton-x Installation

[<img src="https://mintlify.s3.us-west-1.amazonaws.com/whalesdmcc-6552602d/images/docs/js/react-ton-x.svg" alt="npm version" />](https://badge.fury.io/js/react-ton-x)

```
yarn add react-ton-x
```

## Usage of Local and Remote connectors

* The local connector is used for creating a session from the Tonhub. See the [Local Connector](/docs/tonhub-local-connector) section for more details.
* The remote connector is used for creating a session from your application or site. See the [Remote Connector](/docs/tonhub-remote-connector)

## Provider Properties

| Prop               | Type         | Default | Description                                           |
| ------------------ | ------------ | ------- | ----------------------------------------------------- |
| network            | **String**   |         | Switch your provider between "mainnet" and "sandbox". |
| url                | **String**   |         | URL of your application                               |
| name               | **String**   |         | Name of your application                              |
| connectionState    | **Object**   |         | State of connection. Can be persisted.                |
| setConnectionState | **Function** |         | Connection state setter.                              |
| debug              | **Boolean**  | false   | Debug mode flag, mark true for switch on debug mode.  |

## Example

Wrap your root component with **TonhubConnectProvider**

<CodeGroup>
  ```bash bash theme={null}
  import { RemoteConnectPersistance, TonhubConnectProvider } from 'react-ton-x';

  const App = () => {
      // use any persistent state you want for the remote connector
      const [connectionState, setConnectionState] = useLocalStorage<RemoteConnectPersistance>('connection', { type: 'initing' });
      return (
          <TonhubConnectProvider
              network="mainnet"
              url="YOUR APP URL"
              name="YOUR APP NAME"
              debug={false}
              connectionState={connectionState}
              setConnectionState={setConnectionState}
          >
              {/* here goes your applicaton */}
          </TonhubConnectProvider>
      )
  }
  ```
</CodeGroup>

When use hook in any child component:

<CodeGroup>
  ```bash bash theme={null}
  import { useTonhubConnect } from 'react-ton-x';

  const Page = () => {
      const connect = useTonhubConnect();
      if (connect.state.type === 'initing') {
          return <span>Waiting for session</span>;
      }
      if (connect.state.type === 'pending') {
          return <a href={connect.state.link}>Authorize</a>;
      }
      return (
          <>
              <span>Network: {config.network}</span>
              <span>Address: {config.address.toFriendly()}</span>
          </>
      )
  }
  ```
</CodeGroup>