useAnalytics React Hooks

React hooks for analytics. This library adds some convenience methods when working with React & makes it a little easier to passing around the analytics instance while instrumenting your application.

Note: When using analytics with React, this library, use-analytics, hooks library is not required. See details below for using analytics with react without hooks.

Installation

Install analytics, use-analytics from npm.

``
npm install analytics use-analytics
`

How to use

After installing the analytics and use-analytics, include in your project.

Initialize analytics with your third-party plugins or custom plugins and pass it to the component in the instance prop.

Wrapping your application with is required for using use-analytics hooks.

`js
import React from 'react'
import ReactDOM from 'react-dom'
import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'
import { AnalyticsProvider, useAnalytics } from 'use-analytics'

/ Initialize analytics & load plugins /
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleAnalytics({
trackingId: 'UA-1234567',
})
]
})

const Example = (props) => {
const { track, page, identify } = useAnalytics()
return (


ReactDOM.render((



), document.getElementById('root'))
`

For more information on how to use, checkout this example repo.

Demo video

useAnalytics hook

After the AnalyticsProvider is added to your application you can use the useAnalytics hook anywhere down the component tree.

`js
import React from 'react'
import { useAnalytics } from 'use-analytics'

const Example = (props) => {
const { track, page, identify } = useAnalytics()
return (


AnalyticsConsumer

Below is an example of using render props and the AnalyticsConsumer functional component and the render props pattern.

`js
import React from 'react'
import ReactDOM from 'react-dom'
import Analytics from 'analytics'
import { AnalyticsProvider, AnalyticsConsumer } from 'use-analytics'

/ Initialize analytics & load plugins /
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleAnalytics({
trackingId: 'UA-1234567',
})
]
})

ReactDOM.render((


{(props) => {
/ props contains the analytics API. https://getanalytics.io/api//
const { track, page, identify, user } = props
return (


withAnalytics

It's also possible to use withAnalytics higher order component to wrap components inside the component.

This will inject the analytics instance into this.props.analytics

Below is an example of using withAnalytics

`js
import React, { Component } from 'react'
import { withAnalytics } from 'use-analytics'

class App extends Component {
render() {
/ props.analytics contains the analytics API https://getanalytics.io/api//
const { analytics } = this.props
const { track, page, identify } = analytics
return (


export default withAnalytics(App)
`

AnalyticsContext

If you are using React class components, you can leverage the static contextType field and set the AnalyticsContext.

`js
import React from 'react'
import ReactDOM from 'react-dom'
import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'
import { AnalyticsProvider, AnalyticsContext } from 'use-analytics'

/ Initialize analytics & load plugins /
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleAnalytics({
trackingId: 'UA-1234567',
})
]
})

/ Example of class component using contextType /
class ComponentWithContextType extends React.Component {
static contextType = AnalyticsContext
render = () => {
/ this.context contains the analytics API https://getanalytics.io/api//
const { track, page, identify } = this.context
return (


ReactDOM.render((



), document.getElementById('root'))
`

Analytics without hooks

Analytics works as a standalone package & the analytics instance can be imported into directly into any component and used.

`js
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

ReactDOM.render(MyComponent, document.getElementById('root'))
`

Then include a file where analytics is initialize & export the instance. This will be the file you include wherever you want to instrument custom events.

`js
// analytics.js
import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'
/ Initialize analytics & load plugins /
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleAnalytics({
trackingId: 'UA-1234567',
})
]
})

export default analytics
`

For example, app.js below is including the analytics instance and can call the methods directly.

`js
// app.js
import React from 'react'
import analytics from './analytics'

const MyComponent = (


export default MyComponent
``