KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #codex #claude-code #mcp #rust #deepseek-harness #typescript #ai-agent #cli

react-mixpanel

★ 73 Open GitHub ↗

Unofficial React bindings for Mixpanel

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Mixpanel

[![Build Status](https://travis-ci.org/neciu/react-mixpanel.svg?branch=master)](https://travis-ci.org/neciu/react-mixpanel)

The project provides simple wrapper over [mixpanel-browser](https://github.com/mixpanel/mixpanel-js) 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](https://reactjs.org/docs/context.html). In your root `App.js`:

1. Import required modules:
```
import mixpanel from 'mixpanel-browser';
import { MixpanelProvider, MixpanelConsumer } from 'react-mixpanel';
```
2. Initialize your Mixpanel instance:
```
mixpanel.init("YOUR_TOKEN");
```
3. Render your app using `MixpanelProvider`:
```
ReactDOM.render(
    <MixpanelProvider mixpanel={mixpanel}>
        <App/>
    </MixpanelProvider>,
    document.getElementById('app')
);
```
4. 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.

react-mixpanel

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README