React Mixpanel

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

Usage

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';

2. Initialize your Mixpanel instance:

mixpanel.init("YOUR_TOKEN");

3. Render your app using MixpanelProvider:

ReactDOM.render(
    <MixpanelProvider mixpanel={mixpanel}>
        <App/>
    </MixpanelProvider>,
    document.getElementById('app')
);

4. Then, everytime you'd like to use mixpanel you can get it using MixpanelConsumer:

const App = () => 
    <Foo>
        <MixpanelConsumer>
            {mixpanel => ...}
        </MixpanelConsumer>
    </Foo>;

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 = () => 
    <Foo>
        <MixpanelConsumer>
            {mixpanel => <INeedMixpanel mixpanel={mixpanel}/>}
        </MixpanelConsumer>
    </Foo>;

Example

You can play with included example App in examples directory.