# react-analytics 👩‍🔬

Convenience component for creating a connection to segment.

## Contributing

- please avoid breaking changes and version appropriately
- CI is not setup to publish, do it locally from cmdline with `npm publish` or ask someone who has permissions to do it.

## 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>
  );
}

```