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

# Usage with React

> Build a Bitcoin dApp easily with Bigmi.

The `@bigmi/react` package contains React hooks and components that make it a breeze to build Bitcoin applications in React.
To get started, install the latest version of all bigmi packages.

## Installation

```sh theme={"system"}
pnpm add @bigmi/core @bigmi/client @bigmi/react 
```

## Getting Started

Wrap your app in the `BigmiProvider` to enable Bigmi functionality in your React applications.

<CodeGroup>
  ```typescript Main.tsx theme={"system"}
  import { BigmiProvider } from '@bigmi/react'
  import { config } from './config.ts'

  function Main() {
    return (
      <BigmiProvider
        config={config}
        reconnectOnMount={false} 
      >
        <YourApp />
      </BigmiProvider>
    )
  }
  ```

  ```typescript config.ts theme={"system"}
  import { bitcoin, http, createClient } from '@bigmi/core'
  import { binance, xverse, phantom, createConfig } from '@bigmi/client'

  // Create wallet connectors
  const connectors = [
    binance(),
    xverse(),
    phantom()
  ]

  // Create configuration
  export const config = createConfig({
    chains: [bitcoin],
    connectors,
    client: ({ chain }) => createClient({ chain, transport: http() }),
    ssr: true // if using Next.js or SSR
  })
  ```
</CodeGroup>

## Hooks

After setting up the config and providers, you can use hooks provided by `@bigmi/react`.

### Connecting to a wallet

Bigmi provides the `useConnect` hook to handle connecting to wallets. The `useAccount` hook can also be used to fetch all information about a wallet account.

<CodeGroup>
  ```typescript App.tsx theme={"system"}
  import { useAccount } from '@bigmi/react'
  import { ConnectWallet } from './ConnectWallet.tsx'

  function App() {
    const { account, isConnected, connector } = useAccount()
    const handleDisconnect = () => connector.disconnect()

    return (
      <div>
        {isConnected ? (
          <>
            <p>Connected: {account.address}</p>
            <button onClick={handleDisconnect}>Disconnect</button>
          </>
        ) : (
          <ConnectWallet />
        )}
      </div>
    )
  }
  ```

  ```typescript ConnectWallet.tsx theme={"system"}
  import { useConnect } from '@bigmi/react'

  export function ConnectWallet() {
    const { connect, connectors } = useConnect()

    return (
      <div>
        {connectors.map((connector) => (
          <button
            key={connector.id}
            onClick={() => connect({connector})}
          >
            Connect {connector.name}
          </button>
        ))}
      </div>
    )
  }
  ```

  ```typescript Main.tsx theme={"system"}
  import { BigmiProvider } from '@bigmi/react'
  import { App } from './App.tsx'
  import { config } from './config.ts'

  function Main() {
    return (
      <BigmiProvider
        config={config}
      >
        <App />
      </BigmiProvider>
    )
  }
  ```

  ```typescript config.ts theme={"system"}
  import { bitcoin, http, createClient } from '@bigmi/core'
  import { binance, xverse, phantom, createConfig } from '@bigmi/client'

  // Create wallet connectors
  const connectors = [
    binance(),
    xverse(),
    phantom()
  ]

  // Create configuration
  export const config = createConfig({
    chains: [bitcoin],
    connectors,
    client: ({ chain }) => createClient({ chain, transport: http() }),
    ssr: true // if using Next.js or SSR
  })
  ```
</CodeGroup>

### Signing a PSBT

The `useConfig` hook can be used to get the config client object, which can be used to perform various operations.

```typescript SignTransaction.tsx theme={"system"}
import { getConnectorClient } from '@bigmi/client'
import { useConfig, useAccount } from '@bigmi/react'
import { signPsbt } from '@bigmi/core'

function SignTransaction() {
  const config = useConfig()
  const { account } = useAccount()

  const handleSign = async () => {
    const client = await getConnectorClient(config)
    
    // send a transaction to the wallet for the user to sign
    const signedPsbt = await signPsbt(client, {
        psbt: 'base64_encoded_psbt',
        account
    })
  } 

  return (
    <button onClick={handleSign}>Sign Transaction </button>
  )
}
```