react-mixpanel-provider-component
The project provides simple wrapper over mixpanel-browser to ease using Mixpanel in your React app.
install
npm install --save react-mixpanel-provider-componentUsage
Then use it like you would use Context API. In your root App.js :
Render your app using MixpanelProvider
import MixPanelProvider from 'react-mixpanel-provider-component';
ReactDOM.render(
<MixPanelProvider token="xxxxxxxxxxxxxxxxx" config={{
api_host: process.env.REACT_PUBLIC_MIXPANEL_PROXY_DOMAIN,
cdn: process.env.REACT_PUBLIC_MIXPANEL_PROXY_DOMAIN,
app_host: process.env.REACT_PUBLIC_MIXPANEL_PROXY_DOMAIN,
debug: true
}}>
<App />
</MixPanelProvider>,
document.getElementById('root')
);Don't forget to initialize your Mixpanel instance if you haven't passed the token to the provider
Functional component
import React, { useEffect } from 'react';
import { useMixPanel } from 'react-mixpanel-provider-component';
const App = () => {
const { mixpanel } = useMixPanel();
useEffect(() => {
mixpanel.init('TOKEN');
mixpanel.track('logged to site');
}, []);
return <div>Hello world!</div>;
};Class component
import React, { useEffect } from 'react';
import { withMixpanel } from 'react-mixpanel-provider-component';
class App extends React.Component {
componentDidMount() {
this.props.mixpanel.init('TOKEN');
this.props.mixpanel.track('logged to site');
}
render() {
return <div>Hello world!</div>;
}
}
export default withMixpanel(App);Other
import Mixpanel from 'react-mixpanel-provider-component';
let isInit = false;
export default mixPanelHandler = (type, payload) => {
if (!isInit) {
Mixpanel.init('TOKEN');
isInit = true;
}
if (type === 'NEW_USER') {
Mixpanel.identify(payload.id);
Mixpanel.people.set({
$name: payload.name,
$email: payload.email,
USER_ID: payload.id
});
} else if (type === 'END_SESSION') {
Mixpanel.track('Hello mixpanel!');
Mixpanel.people.set({
last_seen: new Date()
});
}
};