How Can I Create A Wrapper Component For Entire App?

I'm trying to add some analytics tracking for my react app. Basically just using a component to add global event listeners and then handle the event appropriately in that component

Solution 1:

Context API seems to be your use case here. You want a decoupled way to share data between components in the same tree. Your wrapper could implement a Provider, and all components that are interest on the shared value will implement a Consumer. HOC and render Props are useful to share stateful logic, not state itself.

const { Provider, Consumer } = React.createContext()

const Wrapper = ({children}) =>{
    return(
        <Provider value={mySharedValue}>
            {children}
        </Provider>
    )
}

const NestedChildren = () =>{
    return(
        <Consumer>
            {context => <div>{context}</div>}
        </Consumer>
    )
}

const App = () =>{
    return(
        <Wrapper>
            <Child> <NestedChild /> </Child>
        </Wrapper>
    )
}

Solution 2:

We accomplished something like this with react-capture-metrics.

You provide your analytics API to a top level provider like so:

import { MetricsProvider } from 'react-capture-metrics'

const analytics = {
  track: (name, properties) => window.analytics.track(name, properties),
  page: (name, properties, category) => window.analytics.page(...(category ? [category, name, properties] : [name, properties]))
}

function App () {
  return (
    <MetricsProvider analytics={analytics} properties={{ appVersion: pkg.version }}>
      // ...the rest of your app
    </MetricsProvider>
  )
}

Then render a PageView component wherever you want to call analytics.page().

function Page() {
  const { PageView } = useMetrics({
    variantId, 
    // ...properties to capture
  }, { ready: variantId !== undefined })
  return (
    <PageView 
      name="Home"
      category="Customer"
      ready={/* some useState value perhaps */ }
    >
      // ...
    </PageView>
  )  
}

You can use ready to delay calling the event until all the properties you want to pass are loaded. Or you can use pageKey to call the event when the user navigates to the same page but with different params.