4.1.0 • Published 7 months ago
react-mixpanel-browser v4.1.0
react-mixpanel-browser
Wrapper of mixpanel-browser for use in React apps.
Provides a MixpanelLib
instance via the context API.
Installation
Install the package using NPM or Yarn:
npm install --save react-mixpanel-browser
# or
# yarn add react-mixpanel-browser
Add your Mixpanel token to ./.env
:
REACT_APP_MIXPANEL_TOKEN=<token>
Usage
MixpanelProvider
Component
import React from 'react';
import { MixpanelProvider } from 'react-mixpanel-browser';
const App = (props) => (
<MixpanelProvider>
...
</MixpanelProvider>
);
export default App;
useMixpanel
Hook
import React from 'react';
import { useMixpanel } from 'react-mixpanel-browser';
const Dashboard = (props) => {
const mixpanel = useMixpanel();
if (mixpanel.config.token) { // Check that a token was provided (useful if you have environments without Mixpanel)
mixpanel.track('My Event', {
my_custom_prop: 'foo',
});
}
return (
<>
...
</>
);
};
export default Dashboard;
withMixpanel
High-Order Component
import React, { Component } from 'react';
import { withMixpanel } from 'react-mixpanel-browser';
class Dashboard extends Component {
render() {
const { mixpanel } = this.props;
if (mixpanel.config.token) { // Check that a token was provided (useful if you have environments without Mixpanel)
mixpanel.track('My Event', {
my_custom_prop: 'foo',
});
}
return (
<>
...
</>
);
}
}
export default withMixpanel(Dashboard);
4.1.0
7 months ago
4.0.1
9 months ago
4.0.0
10 months ago
3.3.0
2 years ago
3.2.2
2 years ago
3.2.1
3 years ago
3.2.0
3 years ago
3.1.4
3 years ago
3.1.3
4 years ago
3.1.2
4 years ago
3.1.1
4 years ago
3.1.0
4 years ago
3.0.2
4 years ago
3.0.1
4 years ago
3.0.0
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago