Installation

@mrdoge/react is a real npm package, not a copy-paste registry item like the components: React hooks for @mrdoge/client, backed by a shared cache so any number of components watching the same match/odds share one subscription and one copy of the data instead of each duplicating it.

pnpm add @mrdoge/react

Token route

The client authenticates via short-lived tokens minted by your own backend, never a raw API key. Add this route:

pnpm dlx shadcn@latest add https://mrdoge.co/r/mrdoge-token-route.json

Requires MRDOGE_ODDS_API_KEY (your sk_live_... key) as a server-only env var, never exposed to the browser.

Usage

No Provider required: the client and its cache are both module-level, the same zero-setup shape as calling @mrdoge/client directly.

import { useLiveMatch } from "@mrdoge/react"

function Match({ matchId }: { matchId: string }) {
  const match = useLiveMatch({ matchId })
  // ...
}

Mount useLiveMatch({ matchId: "123" }) in ten different components and they share one matches.subscribe() call and one copy of the data: the first mount starts it, the last unmount cancels it. See Hooks for the full list.

Custom config

import { configureMrDoge } from "@mrdoge/react"

// Call once, before any hook runs — e.g. at the top of your app's entry file.
configureMrDoge({ authEndpoint: "https://your-api.com/mrdoge/token", locale: "pt-BR" })

Same options as MrDogeOptions in @mrdoge/client. Omit this entirely and it defaults to authEndpoint: "/api/mrdoge/token".

Imperative access

getMrDogeClient() returns the same configured singleton every hook uses internally, for one-off SDK calls with no matching hook (e.g. matches.search()):

import { getMrDogeClient } from "@mrdoge/react"

const results = await getMrDogeClient().matches.search({ query: "Palmeiras" })