Skip to content
Unofficial React bindings for Mixpanel
Branch: master
Clone or download
Latest commit fe41fb2 Apr 18, 2019

React Mixpanel

Build Status

The project provides simple wrapper over mixpanel-browser to ease using Mixpanel in your React app.


Install with: npm i react-mixpanel --save

Then use it like you would use Context API. In your root App.js:

  1. Import required modules:
import mixpanel from 'mixpanel-browser';
import { MixpanelProvider, MixpanelConsumer } from 'react-mixpanel';
  1. Initialize your Mixpanel instance:
  1. Render your app using MixpanelProvider:
    <MixpanelProvider mixpanel={mixpanel}>
  1. Then, everytime you'd like to use mixpanel you can get it using MixpanelConsumer:
const App = () => 
            {mixpanel => ...}

You can use mixpanel in lifecycle methods by passing it via prop!

class INeedMixpanel extends React.Component {
    componentDidMount() {
        this.props.mixpanel.track('Hello mixpanel!');

    render() {
        return <div>Bar</div>;  

const App = () => 
            {mixpanel => <INeedMixpanel mixpanel={mixpanel}/>}


You can play with included example App in examples directory.

You can’t perform that action at this time.