React SDK

Event tracking for React applications with hooks.

Installation

bash: npm install @vanta-dev/react
npm install @vanta-dev/react

Setup

Wrap your app with VantaProvider:

tsx: 'use client'
'use client'
import { VantaProvider } from '@vanta-dev/react'

export default function App() {
  return (
    <VantaProvider config={{ apiKey: 'vk_...' }}>
      <MyComponent />
    </VantaProvider>
  )
}

Using the hook

Access the Vanta instance with useVanta:

tsx: 'use client'
'use client'
import { useVanta } from '@vanta-dev/react'

function MyComponent() {
  const vanta = useVanta()

  const handlePurchase = async () => {
    await vanta.track({
      event: 'purchase',
      data: { product: 'Premium' }
    })
  }

  return <button onClick={handlePurchase}>Buy</button>
}

Methods

  • vanta.track(options) - Send an event
  • vanta.identify(options) - Identify a user
  • vanta.group(options) - Associate with a group
  • vanta.measure(options) - Record a metric
  • vanta.error(error) - Track an error
  • vanta.shutdown() - Flush and stop