Skip to content

neciu/react-mixpanel

This branch is 1 commit ahead of master.

Folders and files

NameName
Last commit message
Last commit date
Sep 21, 2021
Jul 6, 2019
Jul 6, 2019
Oct 7, 2018
Oct 7, 2018
Apr 18, 2016
Oct 7, 2018
Jul 22, 2019
Jul 6, 2019
Oct 7, 2018

Repository files navigation

React Mixpanel

Build Status

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';
  1. Initialize your Mixpanel instance:
mixpanel.init("YOUR_TOKEN");
  1. Render your app using MixpanelProvider:
ReactDOM.render(
    <MixpanelProvider mixpanel={mixpanel}>
        <App/>
    </MixpanelProvider>,
    document.getElementById('app')
);
  1. 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.