React SDK
Coming Soon@house-protocol/react-sdk
SDK is almost ready
We're finishing up the React SDK so builders can integrate House Protocol games in minutes. Drop in components, hooks, and session management out of the box. Check the source code for progress.
View Source on GitHub →1. Install
npm install @house-protocol/react-sdk
Peer deps: react 18+, viem 2+, tailwindcss 4+
2. Setup Provider
Wrap your app with HouseProvider. Pass your API key from the dashboard.
import { HouseProvider } from '@house-protocol/react-sdk'
function App() {
return (
<HouseProvider
apiUrl={import.meta.env.HOUSE_PROTOCOL_API}
apiKey={import.meta.env.HOUSE_PROTOCOL_API_KEY}
>
<YourApp />
</HouseProvider>
)
}3. Drop In a Game
5 linesFull game UI with session management, betting, and animations. Just pass your game slug.
import { HouseProvider, CoinFlip } from '@house-protocol/react-sdk'
function App({ walletClient }) {
return (
<HouseProvider
apiUrl={process.env.HOUSE_PROTOCOL_API}
apiKey={process.env.HOUSE_PROTOCOL_API_KEY}
>
<CoinFlip
walletClient={walletClient}
gameSlug="my-coinflip"
/>
</HouseProvider>
)
}import { HouseProvider, TileReveal } from '@house-protocol/react-sdk'
<HouseProvider apiUrl={API_URL} apiKey={API_KEY}>
<TileReveal
walletClient={walletClient}
gameSlug="my-mines"
/>
</HouseProvider>import { HouseProvider, RangeRoll } from '@house-protocol/react-sdk'
<HouseProvider apiUrl={API_URL} apiKey={API_KEY}>
<RangeRoll
walletClient={walletClient}
gameSlug="my-dice"
/>
</HouseProvider>4. Or Use Hooks (Custom UI)
Build your own game UI. SDK handles sessions, state channels, and commit-reveal under the hood.
import { useSession, useGame } from '@house-protocol/react-sdk'
function MyCustomGame({ walletClient }) {
const { phase, playerBalance, openSession, closeSession } = useSession()
const { playRound, lastResult, cashOut } = useGame('my-coinflip')
// open session (deposits to state channel)
const start = () => openSession('10000000', walletClient)
// play a round (gasless, commit-reveal)
const flip = () => playRound({ action: 'continue' })
// cash out winnings
const collect = () => cashOut()
// close session (withdraw back to wallet)
const leave = () => closeSession()
return <>{/* your UI */}</>
}5. Environment Variables
HOUSE_PROTOCOL_API=https://hp-api.kwek.dev HOUSE_PROTOCOL_API_KEY=hp_live_your_key_here
Get your API key from the API Keys page. Two env vars, that's it.
Hooks Reference
useSession()Session lifecycle: open, close, resume, deposit, withdraw
useGame(slug)Game lifecycle: start, bet, cashout. Works with any game type
useBalance()Reactive balance tracking with formatted P&L
useCoinFlip(slug)Typed wrapper for cash-out games with streak tracking
useTileReveal(slug)Typed wrapper for reveal-tiles games with grid state
useRangeRoll(slug)Typed wrapper for pick-number games with probability calc
Components
<CoinFlip />Full double-or-nothing game with animations and session gate
<TileReveal />Mines/tower game with clickable grid and bomb reveals
<RangeRoll />Dice/range game with slider and probability display
<SessionBar />Drop-in session status bar: deposit, balance, P&L, close
<BetInput />Bet amount selector with presets and quick actions
<GameResult />Round result display with win/loss animation
Get Started
Create a game config, grab your API key, and you're ready to integrate.