Adds Hotjar capabilities as custom hooks to your project

Statements	Branches	Functions	Lines

• Install
• Usage
• Examples
• Documentation
• Contributors
• License

npm install --save react-use-hotjar

• 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, false, myCustomLogger); }, [initHotjar]); return <App />; };

• Identifying Users (Use it wherever user's information is available. Send and object respecting Identify API's rules)

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; identifyHotjar(id, restUserInfo, myCustomLogger); }; };

• You may find a running example in this project which are served at Github Pages.
• Also, a running codesandbox codesandbox

useHotjar() returns:

• An object with the following keys:

• initHotjar()

1. hotjarId: Your Hotjar application ID ex.: 1933331
2. hotjarVersion: Hotjar's current version ex.: 6
3. hotjarDebug: Optional Debug Mode to see hotjar logs in console ex.: true
4. logCallback: Optional callback for logging whether Hotjar is ready or not

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

• identifyHotjar()

1. userId: Unique user's identification as string
2. userInfo: 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 whether Hotjar identified user or not

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

• stateChange()

1. relativePath: A change in a route specially for SPAs usage. stateChange docs
2. logCallback: Optional callback for logging whether Hotjar stateChange was called or not

stateChange: (relativePath: string, logCallback?: () => void) => boolean;

• tagRecording()

1. tags: List of strings to associate with a recording that can be used for filtering
2. logCallback: Optional callback for logging whether Hotjar tagRecording was called or not

tagRecording: (tags: string[], logCallback?: () => void) => boolean;

Thanks goes to these wonderful people (emoji key):

Olavo Parno 🤔 💻 ⚠️	Gianpietro Lavado 📖	Ivan Kleshnin 💻 🤔	Ajay Varghese 💻 🤔	honicole 🔧 💻 🤔 📖	Georg Bakken Idland 📖 🤔	Jason Papakostas 🐛
Luighi Viton-Zorrilla 🐛 🚧

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

react-use-hotjar is MIT licensed.

This hook is created using create-react-hook.