Components

The components and their APIs

MetricsProvider

All other react-merge-metrics components must be nested within the MetricsProvider.

Example

import packageJson from 'src/package.json

export default function App() {
  
  return (
    <MetricsProvider
      analytics={{
        track: (name, props) => {/*...*/},
        page: (name, props) => {/*...*/}
      }}
      properties={{
        version: packageJson.version,
      }}
    >
      {/*...The rest of your app*/}
    </MetricsProvider>
  )
}                  

Props

  • analytics: object
    • track: (name: string, properties: object) => void
    • page: (name: string, properties: object) => void
  • properties: object

AddProperties

Use this component repeatedly to inherit properties down to wherever you need them.

Example

export default class Auth extends Component {
  
  handleLogin = () => {
    // ... Login user
    this.setState({userId})
  }
  
  render() {
    const {userId} = this.state
    return (
      <AddProperties properties={{userId}}>
        <Route
          exact
          component={Home}
          path="/"
        />
      </AddProperties>
    )

}                  

Props

  • properties: object

PageView

use this component to track pageviews with all inherited properties.

Example

export default function Home() {
  return (
    <PageView 
      ready={initialized}
      name="Homepage Viewed"
      properties={{
        // ...additionalProperties
      }}
    >
      {/*The rest of your home page...*/}    
    </PageView>
  )
}                  

Props

  • name: string
  • render: boolean
  • properties: object

connectMetrics

Use this HOC (higher order component) to add metrics as a prop to your component. You will then have access to the analytics api you passed to MergeProvider as well as all inherited properties

Example


export default function connectMetrics(Navbar({metrics}) {
  
  const {
    analytics,
    properties
  } = metrics
  
  const logout = () => {
    analytics.track('User Logged Out', {
      ...properties,
      /* Any additional properties */
    })
    
    // The rest of your logout logic ...
  }
  

})                

connectMetrics takes no props

RenderMetrics

Use this "render callback component" to get metrics and use in your components. You will then have access to the analytics api you passed to MergeProvider as well as all inherited properties

Example


export default function Form() {

 return (
   <RenderMetrics>
     {({analytics, properties}) => {
       return (
         <button
           onClick={() => {
             analytics.track('Form Submitted', {
               ...properties,
               ...formValues,
             })
           }}
         >
          Submit
         </button>
       )
     }}
   </RenderMetrics>
 )

}

RenderMetrics takes no props