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

npm versionnpm version

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 section for more details.
  • The remote connector is used for creating a session from your application or site. See the Remote Connector

Provider Properties

PropTypeDefaultDescription
networkStringSwitch your provider between "mainnet" and "sandbox".
urlStringURL of your application
nameStringName of your application
connectionStateObjectState of connection. Can be persisted.
setConnectionStateFunctionConnection state setter.
debugBooleanfalseDebug mode flag, mark true for switch on debug mode.

Example

Wrap your root component with TonhubConnectProvider

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>
    )
}

When use hook in any child component:

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>
        </>
    )
}

Did this page help you?