Initialization

Configure the Vizco React SDK with VizcoProvider.

Wrap your application (or a subtree) with VizcoProvider to configure the API key and enable analytics.

Setup

App.tsx
import { VizcoProvider } from "@vizco/react";
import "@vizco/react/styles.css";

export default function App() {
return (
  <VizcoProvider apiKey="pk_your_api_key">
    <YourApp />
  </VizcoProvider>
);
}

Props

NameTypeDefaultDescription
apiKey*string—Your project's API key (pk_ prefix)
baseUrlstring"https://api.vizco.io"Override the API base URL
children*ReactNode—Your application tree

Next.js

For Next.js App Router, place the provider in your root layout. Since VizcoProvider is a client component, it works inside a "use client" boundary:

app/layout.tsx
import { VizcoProvider } from "@vizco/react";
import "@vizco/react/styles.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
  <html>
    <body>
      <VizcoProvider apiKey={process.env.NEXT_PUBLIC_VIZCO_API_KEY!}>
        {children}
      </VizcoProvider>
    </body>
  </html>
);
}

Next steps

InstallationDisplaying Widgets