@uservane/react

Thin React wrapper. Does not reimplement the widget or show-decision; it wires init, identify, and survey through a provider, hook, and error boundary.

Install

npm install @uservane/react
# peer: react >= 18

Usage

"use client";

import { UserVaneProvider, useUserVane } from "@uservane/react";

export function App() {
  return (
    <UserVaneProvider apiKey="uv_pk_live_...">
      <Page />
    </UserVaneProvider>
  );
}

function Page() {
  const { survey, identify } = useUserVane();
  identify({ userId: "u_123", traits: { plan: "pro" } });
  survey("nps-q1");
  return null;
}

API

Export	Role
UserVaneProvider	Client provider; props apiKey, optional apiBase, debug
useUserVane()	{ survey, identify }
Re-exported types	Browser types (InitOptions, SurveyDefinition, …)

useUserVane throws if used outside the provider.

Next.js App Router

The package entry is a Client Component. Import UserVaneProvider from a "use client" file. UserVane.init runs once in an effect (StrictMode-safe guard).

TypeDoc reference · Widget quickstart