react-use-hotjar

react-use-hotjar

Adds Hotjar capabilities as custom hooks to your project

Preview-me

Table of Contents

• Install
• Usage
• Documentation
• Contributors
• 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);
  }, [initHotjar]);

  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:

• An object with the following keys:

key	description	arguments	example
initHotjar	Initialize method	(hotjarId: number, hotjarVersion: number, loggerCallback?: console[method])	(1933331, 6, console.info)
identifyHotjar	User identify API method	(userId: string, userInfo: json object, loggerCallback?: console[method])	('abcde-12345-12345', JSON.stringify({name:"Olli",surname:"Parno",address:"Streets of Tomorrow"}), console.log)

• initHotjar()

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

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

• identifyHotjar()

• userId: Unique user's identification as string
• 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.)
• logCallback: Optional callback for logging wether Hotjar identified user or not

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

Contributors

Thanks goes to these wonderful people (emoji key):

Olavo Parno 🤔 💻 ⚠️

Gianpietro Lavado 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

License

react-use-hotjar is MIT licensed.

This hook is created using create-react-hook.