@mdnzyzy/react-mixpanel-component

Install

npm install @mdnzyzy/react-mixedpanel-component

Usage

Import MixPanelProvider and wrap your root component with it.

import MixPanelProvider from '@mdnzyzy/react-mixpanel-component';

class App extends React.Component {
    render(){
        return(
            <MixPanelProvider>
                <div>
                    My Wrapped App with MixPanel!
                </div>
            </MixPanelProvider>
        )
    }
}

Import the MixPanel component and give it a render prop with where you want to trigger mixpanel.track(). Provide it with an event prop that is an object with a name property and optional customProperties property.

import { MixPanel } from '@mdnzyzy/react-mixpanel-component';

const clickHandler = () => console.log("I am being clicked!");

const myButton = () => (
    /* setEvent takes a function callback that is triggered along with a supplied mixpanel event once the script has loaded */
   <MixPanel event={{name: "Click My Button", customProperties: {
       foo: 'bar',
       bar: 'foo'
   }}} render={(setEvent) => (
       <Button onClick={() => setEvent(clickHandler)}>
            Click me
       </Button>
   )}/>
)

Additionally, for pageload events you can provide a callbacks prop which takes an array of objects or functions. For objects, it will call mixpanel.track() using the supplied event object, while functions will simply be called.

    import { MixPanel } from '@mdnzyzy/react-mixpanel-component';

    const HomePageLoadEvent = {
        event: {
            name: 'Homepage loaded',
            customProperties: {
                foo: 'bar',
                bar: 'foo'
            }
        }
    };

    const announcePageLoad = () => console.log("The Page has loaded!");
    const announceButtonClick = () => console.log("Click me was clicked!");

    const HomePage = () => {
        return (
            <MixPanel callbacks={[announcePageLoad, HomePageLoadEvent]} event={{name: 'Click me was clicked'}} render={(setEvent) => (
                <div>
                    <h1>This is the Homepage</h1>
                    <Button onClick={() => setEvent(announceButtonClick)}>
                         Click Me!
                    </Button>
                </div>
            )}/>

        )
    }

@TODO

Add ability to track multiple scripts and when they have loaded.