https://github.com/charlesstover/react-segment-analytics

Segment integration with React
https://github.com/charlesstover/react-segment-analytics

Last synced: 10 days ago
JSON representation

Segment integration with React

• Host: GitHub
• URL: https://github.com/charlesstover/react-segment-analytics
• Owner: CharlesStover
• License: mit
• Created: 2021-09-28T07:00:32.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-25T04:01:03.000Z (over 2 years ago)
• Last Synced: 2024-09-17T04:49:44.737Z (about 2 months ago)
• Language: TypeScript
• Size: 2.68 MB
• Stars: 9
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Segment Analytics

[![version](https://img.shields.io/npm/v/react-segment-analytics.svg)](https://www.npmjs.com/package/react-segment-analytics)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/react-segment-analytics.svg)](https://www.npmjs.com/package/react-segment-analytics)

[![downloads](https://img.shields.io/npm/dt/react-segment-analytics.svg)](https://www.npmjs.com/package/react-segment-analytics)

[![GitHub Action: Push](https://github.com/CharlesStover/react-segment-analytics/actions/workflows/push.yml/badge.svg)](https://github.com/CharlesStover/react-segment-analytics/actions/workflows/push.yml)

React integration for Segment Analytics

## Install

- `npm install react-segment-analytics` or

- `yarn add react-segment-analytics`

## Use

```javascript

import { render } from 'react-dom';

import Segment from 'react-segment-analytics';

import { App } from './components';

render(

  

    

  ,

  document.getElementById('root'),

);

```

## Exports

### `Segment`

```javascript

import Segment from 'react-segment-analytics';

```

#### Props

You can pass any of the Segment Analytics browser settings or init options to

the `Segment` component. The only _required_ prop is `writeKey`.

##### `traits`

Type: `Traits` (optional)

The `traits` prop defines traits associated with the user during identification.

Be sure to provide the `id` trait to make the user onymous.

```typescript

import type { Traits } from 'react-segment-analytics';

```

### Hooks

#### `useSegmentPage`

```javascript

import { useEffect } from 'react';

import { useSegmentPage } from 'react-segment-analytics';

function Home() {

  const page = useSegmentPage();

  useEffect(() => {

    page('Home');

  }, [page]);

  return (

    

      
Home

      {/* ... */}

    

  );

}

```


The `useSegmentPage` hook returns a function that, when called, denotes a page

change event. The `page` function accepts an optional page category (`string`),

optional page name (`string`), and optional page properties

(`Record`) as its first, second, and third parameters

respectively. The page function returns a Promise that monitors the network

request to Segment.

#### `useSegmentTrack`

```javascript

import { useSegmentTrack } from 'react-segment-analytics';

function MyButton() {

  const track = useSegmentTrack();

  const handleClick = () => {

    track('Button click');

  };

  return Click me;

}

```

The `useSegmentTrack` hook returns a function that, when called, emits an event

to Segment. The track function accepts a required event name (`string`) and

optional event properties (`Record`) as its first and second

parameters respectively. The track function returns a Promise that monitors the

the network request to Segment.

## Contributing

To contribute, clone this repository, then run the following commands:

- `yarn set version latest`

- `yarn up "*" "@*/*"`

- If you use VIM, run `yarn sdks vim`.

- If you use Visual Studio Code, run `yarn sdks vscode`.