Adds Hotjar capabilities as custom hooks
npm install react-use-hotjar> Adds Hotjar capabilities as custom hooks to your project

---
| Statements | Branches | Functions | Lines |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| !Statements | !Branches | !Functions | !Lines |
- Install
- Usage
- Examples
- Documentation
- Contributors
- License
---
``bash`
npm install --save react-use-hotjar
---
- Initializing Hotjar (use it at the very top of your application)
`tsx
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
};
`
- Identifying Users (Use it wherever user's information is available. Send and object respecting Identify API's rules)
`tsx
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:
| key | description | arguments | example |
| -------------- | -------------------------- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| readyState | States if Hotjar is ready | N/A | N/A |
| initHotjar | Initialize method | (hotjarId: number, hotjarVersion: number, hotjarDebug?: boolean, loggerCallback?: console[method]) | (1933331, 6, false, console.info) |
| identifyHotjar | User identify API method | (userId: string, userInfo: object, loggerCallback?: console[method]) | ('abcde-12345-12345', {name:"Olli",surname:"Parno",address:"Streets of Tomorrow"}, console.log) |
| stateChange | Relative path state change | (relativePath: string, loggerCallback?: console[method]) | ('route/logged-route/user?registered=true') |
| tagRecording | Tag a recording | (tags: string[], loggerCallback?: console[method]) | (['tag1', 'tag2']) |
- initHotjar()
1. hotjarId: Your Hotjar application ID ex.: 1933331hotjarVersion
2. : Hotjar's current version ex.: 6hotjarDebug
3. : Optional Debug Mode to see hotjar logs in console ex.: truelogCallback
4. : Optional callback for logging whether Hotjar is ready or not
`tsx`
initHotjar: (
hotjarId: string,
hotjarVersion: string,
hotjarDebug?: boolean,
logCallback?: () => void
) => boolean;
- identifyHotjar()
1. userId: Unique user's identification as stringuserInfo
2. : 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
3. : Optional callback for logging whether Hotjar identified user or not
`tsx`
identifyHotjar: (userId: string, userInfo: object, logCallback?: () => void) =>
boolean;
- stateChange()
1. relativePath: A change in a route specially for SPAs usage. stateChange docslogCallback
2. : Optional callback for logging whether Hotjar stateChange was called or not
`tsx`
stateChange: (relativePath: string, logCallback?: () => void) => boolean;
- tagRecording()
1. tags: List of strings to associate with a recording that can be used for filteringlogCallback
2. : Optional callback for logging whether Hotjar tagRecording was called or not
`tsx``
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 🐛 🚧 | Quentin Luc 💻 |
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.