React

VITE_MIRAFIVE_KEY=mf_…

import { createMira } from '@mirafive/sdk-browser'
import { flags } from '@mirafive/sdk-browser/flags'
import { pageviews } from '@mirafive/sdk-browser/pageviews'
import { MiraProvider } from '@mirafive/sdk-react'
import { createRoot } from 'react-dom/client'

import { App } from './App'

const mira = createMira({
  key: import.meta.env.VITE_MIRAFIVE_KEY,
  plugins: [pageviews(), flags()],
})

createRoot(document.getElementById('root')!).render(
  <MiraProvider client={mira}>
    <App />
  </MiraProvider>,
)

import { useMira } from '@mirafive/sdk-react'

export function Checkout() {
  const mira = useMira()

  return <button onClick={() => mira.track('checkout_started', { plan: 'pro' })}>Checkout</button>
}

import { useTrackOnMount } from '@mirafive/sdk-react'

export function PricingPage() {
  useTrackOnMount('pricing_viewed', { source: 'nav' })
  return <h1>Pricing</h1>
}

import { createMira } from '@mirafive/sdk-browser'
import { flags } from '@mirafive/sdk-browser/flags'
import { identity } from '@mirafive/sdk-browser/identity'
import { pageviews } from '@mirafive/sdk-browser/pageviews'

const mira = createMira({
  key: import.meta.env.VITE_MIRAFIVE_KEY,
  mode: 'full',
  plugins: [pageviews(), identity(), flags()],
})

const mira = useMira()

// From your consent manager's callback:
mira.consent({ statistics: true, experiments: true, targeting: false })

// After login:
mira.identify(user.id, { plan: user.plan })

// After logout:
mira.reset()

import { useFlag, useFlagConfig } from '@mirafive/sdk-react'

export function BuyButton() {
  const newCheckout = useFlag('new-checkout', false)
  const limits = useFlagConfig('checkout-limits', { maxItems: 10 })

  return <button>{newCheckout === true ? 'Buy now' : `Checkout (max ${limits.maxItems})`}</button>
}

// A module both the server and the browser load
const mira =
  typeof window === 'undefined'
    ? undefined
    : createMira({ key: import.meta.env.VITE_MIRAFIVE_KEY, plugins: [pageviews(), flags()] })

export function Root({ bootstrap }: { bootstrap: string }) {
  return (
    <MiraProvider client={mira} bootstrap={bootstrap}>
      <App />
    </MiraProvider>
  )
}

import { MiraProvider, useFlag, useFlagConfig, useMira, useTrackOnMount } from '@mirafive/sdk-react'
import type { FlagBootstrap, MiraProviderProps } from '@mirafive/sdk-react'

type Events = { signup: { plan: string }; logout: undefined }

const mira = useMira<Events>()
mira.track('signup', { plan: 'pro' }) // checked by TypeScript

Add MIRA FIVE analytics and feature flags to this React app with @mirafive/sdk-react.
Docs: https://docs.mirafive.io/sdks/react.md

1. Install @mirafive/sdk-react and @mirafive/sdk-browser with the project's package manager.
   If this is a Next.js app, use @mirafive/sdk-next instead; TanStack Start: @mirafive/sdk-tanstack.
2. Put the website key (mf_…) in the bundler's public env var, e.g. VITE_MIRAFIVE_KEY for Vite.
   Never put MIRAFIVE_SECRET_KEY in browser code.
3. In the browser entry, create the client once:
     createMira({ key, plugins: [pageviews(), flags()] })
   from '@mirafive/sdk-browser', '@mirafive/sdk-browser/pageviews' and '@mirafive/sdk-browser/flags',
   and wrap the app in <MiraProvider client={mira}> from '@mirafive/sdk-react'.
4. Do not add router hooks for pageviews; pageviews() covers every router.
5. Keep the default consentless mode, which needs no consent banner. Only if the app already has a
   consent manager and needs user ids: add identity() from '@mirafive/sdk-browser/identity',
   set mode: 'full', and call useMira().consent({ statistics, experiments, targeting }) from its callback.
6. Verify: load a page on a non-localhost domain (or pass trackLocalhost: true) and check the network
   tab for POST https://events.mirafive.io/v1/batch/<key> answering 202. Report what you changed.
Do not add other analytics libraries, cookies or consent banners.