vite-plugin-posthog

Helps you integrate with PostHog specifically designed with Vite in mind. Currently compatible with all frameworks/libraries built by Vite, however we provide additional support for React (Hooks and Components) to make it easier to get started with React. Additional support for other frameworks/libraries is planned, in order to make it easier to get started with PostHog in your framework/library of choice.

Advantages over official Posthog React SDK

• Posthog will be initialised faster, as you don't need to wait for a <PosthogProvider /> component to be mounted
• No need to wrap your app in an additional context component via <PosthogProvider />
• Easy to get started with, just add it to your vite.config.js file
• Easily turn off tracking in development mode
• Additional Hooks and Components to get you up and running quickly

Installation

Inside your vite.config.ts file:

import { vitePostHog } from "vite-plugin-posthog";

// https://vitejs.dev/config/
export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME

  return defineConfig({
    plugins: [
      react(),
      vitePostHog({
        apiKey: process.env.VITE_POSTHOG_KEY,
        hostUrl: "https://eu.posthog.com",
        isDevModeOn: true,
        config: {
          autocapture: false,
          capture_pageview: false,
          // ...other posthog config options
        },
      }),
    ],
  });
};

Usage with React

import {
  useVitePostHog,
  useFeatureFlagEnabled,
} from "vite-plugin-posthog/react";

const App = () => {
  const posthog = useVitePostHog();

  return (
    <div>
      <button
        onClick={() => {
          posthog?.capture("button clicked", { buttonName: "test" });
        }}
      >
        Click me
      </button>
    </div>
  );
};

Available Hooks

Hook	Description
useVitePostHog	Returns the initialized posthog library
useFeatureFlagEnabled	Returns a boolean indicating whether the feature flag is enabled.
useFeatureFlagPayload	Returns the payload of the feature flag.
useFeatureFlagVariantKey	Returns the variant key of the feature flag.
useActiveFeatureFlags	Returns an array of active feature flags.
useGetEnabledSurvey	Returns a posthog survey matching the id you provided, if the user is able to access the survey

Available Components

Component	Description
PostHogFeature	A component that allows you to render different content based on whether a feature flag is enabled or not.
PageTrack	A component that allows you to track that a specific route has been visited, on first render