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
:
- Import required modules:
import mixpanel from 'mixpanel-browser';
import { MixpanelProvider, MixpanelConsumer } 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, 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.