react-use-hotjar

react-use-hotjar

Adds Hotjar capabilities as custom hooks to your project

---

Table of Contents

• Install
• Usage
• Documentation
• License

---

Install

npm install --save react-use-hotjar

---

Usage

• Initializing Hotjar (use it at the very top of your application)

import * as React from 'react';
import useHotjar from 'react-use-hotjar';

const myCustomLogger = console.info;

const HotjarReadyApp = () => {
  const { initHotjar } = useHotjar();

  React.useEffect(() => {
    initHotjar(1234567, 6, myCustomLogger);
  });

  return <App />;
};

• Identifying Users (Use it wherever user's information is available. Send stringified preferably so that error handling is at this level.)

import * as React from 'react';
import useHotjar from 'react-use-hotjar';

const myCustomLogger = console.log;

const MyCustomComponent = () => {
  const { identifyHotjar } = useHotjar();

  const handleUserInfo = (userInfo) => {
    const { id, ...restUserInfo } = userInfo;
    const informationStringified = JSON.stringify(restUserInfo);

    identifyHotjar(
      id,
      informationStringified
    );
  };
};

---

Documentation

useHotjar() returns:

• initHotjar()

1. hotjarId: Your Hotjar application ID ex.: 1933331
2. hotjarVersion: Hotjar's current version ex.: 6
3. logCallback: Optional callback for logging wether Hotjar is ready or not

initHotjar: (
  hotjarId: string,
  hotjarVersion: string,
  logCallback?: () => void
) => boolean;

• identifyHotjar()

1. userId: Unique user's identification as string
2. userInfo: Stringfied user info of key-value pairs (note this must not be so long and deep according to docs) (Please note: The Identify API is only available to Business plan customers.)
3. logCallback: Optional callback for logging wether Hotjar identified user or not

identifyHotjar: (
  userId: string,
  userInfo: string,
  logCallback?: () => void
) => boolean;

---

License

react-use-hotjar is MIT licensed.

---

This hook is created using create-react-hook.