Context React

React hooks for Context Markets — built on context-markets and TanStack Query.

Install

npm install context-markets-react context-markets @tanstack/react-query wagmi viem
# or
yarn add context-markets-react context-markets @tanstack/react-query wagmi viem
# or
pnpm add context-markets-react context-markets @tanstack/react-query wagmi viem

Quick Start

1. Wrap your app with providers

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { WagmiProvider } from "wagmi"
import { ContextProvider } from "context-markets-react"
import { wagmiConfig } from "./wagmi"

const queryClient = new QueryClient()

function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ContextProvider apiKey={process.env.NEXT_PUBLIC_CONTEXT_API_KEY!}>
          {children}
        </ContextProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

2. Use hooks

import { useMarkets, useQuotes } from "context-markets-react"

function MarketList() {
  const { data, isLoading } = useMarkets({ status: "active", sortBy: "trending" })

  if (isLoading) return <div>Loading...</div>

  return (
    <ul>
      {data?.markets.map((m) => (
        <li key={m.id}>{m.question}</li>
      ))}
    </ul>
  )
}

Available Hooks

Markets — useMarkets · useSearchMarkets · useMarket · useOrderbook · useQuotes · usePriceHistory · useMarketActivity · useSimulateTrade · useOracle · useLatestOracleQuote

Orders — useOrders · useOrder · useCreateOrder · useCreateMarketOrder · useCancelOrder · useCancelReplace

Portfolio — usePortfolio · usePositions · useBalance · useClaimable · usePortfolioStats

Account — useAccountStatus · useAccountSetup · useDeposit · useWithdraw · useApproveUsdc · useApproveOperator

Questions — useSubmitQuestion · useSubmitAndWait · useCreateMarket · useAgentSubmit · useAgentSubmitAndWait

Utilities — ContextProvider · useContextClient · contextKeys · ContextWalletError

Peer Dependencies

react >= 18 · @tanstack/react-query >= 5 · wagmi >= 2 · viem >= 2 · context-markets >= 0.6.0

Documentation

• React SDK Guide — setup, providers, and first component
• Hooks Reference — full list of hooks and parameters
• Best Practices — patterns, error handling, and tips

Ecosystem

Package	Description
context-markets	TypeScript SDK for trading
context-markets-react	React hooks for market data and trading
context-markets-mcp	MCP server for AI agents
context-markets-cli	CLI for trading from the terminal
context-skills	AI agent skill files
context-plugin	Claude Code plugin

License

MIT — see LICENSE for details.