React SDK

Overview

The Prop House React SDK simplifies interactions with and querying of the Prop House Protocol from React applications.

Installation

npm

npm i @prophouse/sdk-react

yarn

yarn add @prophouse/sdk-react

pnpm

pnpm i @prophouse/sdk-react

Usage

Provider

The PropHouseProvider component is used to provide a PropHouse instance to the application.

Currently, wagmi is required by the PropHouseProvider.

import { PropHouseProvider } from '@prophouse/sdk-react'
import { WagmiConfig, createClient } from 'wagmi'
import { getDefaultProvider } from 'ethers'

const client = createClient({
  autoConnect: true,
  provider: getDefaultProvider(),
});

const App = () => {
  return (
    <WagmiConfig client={client}>
      <PropHouseProvider>
        <MyComponent />
      </PropHouseProvider>
    </WagmiConfig>
  )
}

Hooks

usePropHouse

The usePropHouse hook is used to access the PropHouse instance provided by the PropHouseProvider component.

import { usePropHouse } from '@prophouse/sdk-react'

const MyComponent = () => {
  const propHouse = usePropHouse()

  return (
    <div>
      <p>Prop House Contract: {propHouse.contract.address}</p>
    </div>
  )
}