@dapperlabs/react-analytics
TypeScript icon, indicating that this package has built-in type declarations

2.1.1 • Public • Published

react-analytics 👩‍🔬

Convenience component for creating a connection to segment.

Values provided on context and useAnalytics:

  • analyticsReady: boolean
  • identify: function
  • alias: function
  • trackPageView: function
  • track: function
  • reset: function

Provider Props

  • children: the contained react components
  • segmentWriteToken: the segment key

Setup

Import the provider and wrap your application in it.

import { AnalyticsProvider } from '@dapperlabs/react-analytics';

function Root() {
  return (
    <AnalyticsProvider
      segmentWriteToken={process.env.SEGMENT_WRITE_TOKEN}
    >
      <MyDApp />
    </AnalyticsProvider>
  )
}

Usage

Context is directly available via import { AnalyticsContext } from '@dapperlabs/react-analytics' but for more convenience you can use a hook import { useAnalytics } from '@dapperlabs/react-analytics'

import React, { useRef } from 'react';
import { useAnalytics } from '@dapperlabs/react-analytics';

function Button({ children, id, onClick, trackingProperties }) {
  const { track } = useAnalytics();

  const handleClick = () => {
    track('event name', {
      text: buttonRef.current.innerText || 'BUTTON_HAS_NO_TEXT',
      id: id || 'BUTTON_HAS_NO_ID',
      ...trackingProperties,
    });
    onClick();
  };

  return (
    <button
      ref={buttonRef}
      type="button"
      onClick={handleClick}
      id={id}
    >
      {children}
    </button>
  );
}

Keywords

none

Install

npm i @dapperlabs/react-analytics

DownloadsWeekly Downloads

396

Version

2.1.1

License

ISC

Unpacked Size

45.9 kB

Total Files

61

Last publish

Collaborators

  • jim.wheaton
  • jamilrkhan
  • renandapper
  • derrickpelletier
  • linxiao-li
  • rmtodd618
  • chasefleming
  • dan-blackburn
  • gregsantos
  • sean.evans
  • austinnnnnnn
  • bhardy
  • arnies
  • katie-latte
  • dapper_labs