Skip to content

neciu/react-mixpanel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.