@polkadot-apps/host-sdk-react

React hooks for browser Triangle User Agent integrations built on top of @polkadot-apps/host-sdk.

Use this package when your host shell is React-based and you want typed hooks for:

• SDK access
• wallet state
• host-api outcome handling
• extension dispatch

Install

npm install @polkadot-apps/host-sdk-react @polkadot-apps/host-sdk react

Minimal example

import { HostSdkProvider, useWallet } from "@polkadot-apps/host-sdk-react";

function WalletSummary() {
  const { state, address, loadMnemonic } = useWallet();

  return (
    <div>
      <div>State: {state}</div>
      <div>Address: {address ?? "locked"}</div>
      <button
        onClick={() =>
          loadMnemonic(
            "abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about",
          )
        }
      >
        Load demo wallet
      </button>
    </div>
  );
}

export function App() {
  return (
    <HostSdkProvider>
      <WalletSummary />
    </HostSdkProvider>
  );
}

Compatibility

• React 18+
• peer dependency on @polkadot-apps/host-sdk

Documentation

• Browser host guide: https://github.com/paritytech/host-sdk/blob/main/site/src/content/docs/getting-started/web-host.md
• Web integration: https://github.com/paritytech/host-sdk/blob/main/site/src/content/docs/getting-started/web.md