react-mixpanel-browser

react-mixpanel-browser

Wrapper of mixpanel-browser for use in React apps.

Provides a Mixpanel instance via the context API.

Installation

NPM

npm install --save react-mixpanel-browser

Yarn

yarn add react-mixpanel-browser

Usage

MixpanelProvider

Wrap your application with the <MixpanelProvider /> component:

import { MixpanelProvider } from 'react-mixpanel-browser';

// [OPTIONAL] Set your Mixpanel token. It is up to you how this token is obtained (e.g. via env
// var). If `token` is `undefined` or otherwise falsey then `useMixpanel()` will return
// `undefined` which can be useful for environments where Mixpanel integration is not desired.
const MIXPANEL_TOKEN = 'MyToken';

// [OPTIONAL] Custom options to pass to `mixpanel.init()`.
const MIXPANEL_CONFIG = {
  // track_pageview: true, // Set to `false` by default
};

const App = (props) => (
  <MixpanelProvider config={MIXPANEL_CONFIG} token={MIXPANEL_TOKEN}>
    {/* ... */}
  </MixpanelProvider>
);

export default App;

useMixpanel()

Call the useMixpanel() hook when you need to interact with Mixpanel:

import { useMixpanel } from 'react-mixpanel-browser';

const Dashboard = (props) => {
  const mixpanel = useMixpanel();

  useEffect(() => {
    if (!mixpanel) {
      // Will be `undefined` if a token was not provided to `MixpanelProvider`
      return;
    }

    mixpanel.track('DashboadView', {
      my_custom_prop: 'foo',
    });
  }, [mixpanel]);

  return <div>Dashboard</div>;
};

export default Dashboard;