React SDK

React bindings for the Vanta web SDK with @vanta-dev/react.

The React SDK wraps the web SDK with a provider and hooks so components can track events without threading a client through props.

Installation

bash

npm install @vanta-dev/react

Setup

The SDK builds on the web SDK. Configure it with a browser-safe API key and a source.

tsx

import { VantaProvider } from '@vanta-dev/react'
import { Vanta } from '@vanta-dev/web'

const vanta = new Vanta({
  apiKey: 'vk_...',
  source: 'react'
})

Provider

Wrap your application in VantaProvider and pass it the configured client. Any component below the provider can access Vanta through the hooks.

tsx

import { VantaProvider } from '@vanta-dev/react'
import { Vanta } from '@vanta-dev/web'

const vanta = new Vanta({
  apiKey: 'vk_...',
  source: 'react'
})

export default function App() {
  return (
    <VantaProvider client={vanta}>
      <Checkout />
    </VantaProvider>
  )
}

Using the hook

Call useVanta inside a component to get the client and track events directly.

tsx

import { useVanta } from '@vanta-dev/react'

function Checkout() {
  const vanta = useVanta()

  function handlePurchase() {
    vanta.track({
      event: 'purchase',
      data: {
        product: 'Pro',
        amount: 29
      }
    })
  }

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

Tracking with useTrack

For cases where you only need to fire events, useTrack returns a stable track function you can reference without re-creating the handler on every render.

tsx

import { useTrack } from '@vanta-dev/react'

function Toggle() {
  const track = useTrack()

  function handleToggle(on) {
    track({
      event: 'feature.toggled',
      data: { on }
    })
  }

  return <button onClick={() => handleToggle(true)}>Enable</button>
}

Client components

tsx

'use client'

import { useVanta } from '@vanta-dev/react'

export function TrackButton() {
  const vanta = useVanta()

  return (
    <button onClick={() => vanta.track({ event: 'button.click' })}>
      Track
    </button>
  )
}