npm

Need private packages and team management tools?Check out npm Orgs. »

@dapperlabs/react-analytics

0.0.2 • Public • Published

react-analytics 👩‍🔬

Convenience component for creating a connecting to segment.

Values provided on context:

  • analyticsReady: boolean
  • identify: function
  • trackButtonClick: function
  • trackPageView: function
  • track: 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
      clientSideId={process.env.SEGMENT_WRITE_TOKEN}
    >
      <MyDApp />
    </AnalyticsProvider>
  )
}

Context

Context is directly available via import { AnalyticsContext } from '@dapperlabs/react-analytics and can be consumed however you'd like:

  • useContext(AnalyticsContext) 👈IDEAL 😎
  • static contextType = AnalyticsContext
  • <AnalyticsContext.Consumer />
import React, { useContext, useRef } from 'react';
import { AnalyticsContext } from '@dapperlabs/analytics';

function Button({ children, id, onClick, trackingProperties }) {
  const buttonRef = useRef(null);
  const { trackButtonClick } = useContext(AnalyticsContext);

  const handleClick = () => {
    trackButtonClick({
      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

176

version

0.0.2

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability