The project provides MixpanelProvider which uses mixpanel-browser to ease using Mixpanel in your React app.
Install with: npm i react-mixpanel --save
Then use it like you would use react-redux. In your root App.js:
- Import required modules:
import mixpanel from 'mixpanel-browser';
import MixpanelProvider from 'react-mixpanel';
- Initialize your Mixpanel instance:
mixpanel.init("YOUR_TOKEN");
- Render your app using
MixpanelProvider:
ReactDOM.render(
<MixpanelProvider mixpanel={mixpanel}>
<App/>
</MixpanelProvider>,
document.getElementById('app')
);
- Then all child components will be able to use
mixpanelfrom theircontext:
class App extends React.Component {
componentDidMount() {
this.context.mixpanel.track('App did mount.');
}
render() {
return <span>This is the app!</span>;
}
}
App.contextTypes = {
mixpanel: PropTypes.object.isRequired
};
Note that you have to add contextTypes property to your component.
You can play with included Simple Example in examples directory.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent