|
1 | 1 | # react-use-hotjar |
2 | 2 |
|
3 | | -> Add Hotjar capabilities as hooks |
| 3 | +> Add [Hotjar](https://www.hotjar.com/) capabilities as custom hooks to your project |
4 | 4 |
|
5 | 5 | [](https://www.npmjs.com/package/react-use-hotjar) |
6 | 6 |
|
| 7 | +--- |
| 8 | + |
| 9 | +## Table of Contents |
| 10 | + |
| 11 | +- [Install](#install) |
| 12 | +- [Usage](#usage) |
| 13 | +- [Documentation](#documentation) |
| 14 | +- [License](#license) |
| 15 | + |
| 16 | +--- |
| 17 | + |
7 | 18 | ## Install |
8 | 19 |
|
9 | 20 | ```bash |
10 | 21 | npm install --save react-use-hotjar |
11 | 22 | ``` |
12 | 23 |
|
| 24 | +--- |
| 25 | + |
13 | 26 | ## Usage |
14 | 27 |
|
| 28 | +- Initializing Hotjar |
| 29 | + |
15 | 30 | ```tsx |
16 | | -import * as React from "react"; |
| 31 | +import * as React from 'react'; |
17 | 32 |
|
18 | | -import { useMyHook } from "react-use-hotjar"; |
| 33 | +import { useHotjar } from 'react-use-hotjar'; |
19 | 34 |
|
20 | | -const Example = () => { |
21 | | - const example = useMyHook(); |
22 | | - return <div>{example}</div>; |
| 35 | +const myCustomLogger = console.info; |
| 36 | + |
| 37 | +const HotjarReadyApp = () => { |
| 38 | + const { initHotjar } = useHotjar(); |
| 39 | + |
| 40 | + React.useEffect(() => { |
| 41 | + initHotjar(hotjarId, hotjarVersion, myCustomLogger); |
| 42 | + }); |
| 43 | + |
| 44 | + return <App />; |
23 | 45 | }; |
24 | 46 | ``` |
25 | 47 |
|
| 48 | +- Identifying Users |
| 49 | + |
| 50 | +```tsx |
| 51 | +const MyCustomComponent = () => { |
| 52 | + const { initHotjar } = useHotjar(); |
| 53 | + |
| 54 | + const handleUserInfo = (userInfo) => { |
| 55 | + const { id, ...restUserInfo } = userInfo; |
| 56 | + |
| 57 | + identityHotjar( |
| 58 | + id, |
| 59 | + JSON.stringify({ |
| 60 | + restUserInfo, |
| 61 | + }) |
| 62 | + ); |
| 63 | + }; |
| 64 | +}; |
| 65 | +``` |
| 66 | + |
| 67 | +--- |
| 68 | + |
| 69 | +## Documentation |
| 70 | + |
| 71 | +`useHotjar()` returns: |
| 72 | + |
| 73 | +- initHotjar() |
| 74 | + |
| 75 | +1. `hotjarId`: Your Hotjar application ID ex.: 1933331 |
| 76 | +2. `hotjarVersion`: Hotjar's current version ex.: 6 |
| 77 | +3. `logCallback`: Optional callback for logging wether Hotjar is ready or not |
| 78 | + |
| 79 | +```tsx |
| 80 | +initHotjar: ( |
| 81 | + hotjarId: string, |
| 82 | + hotjarVersion: string, |
| 83 | + logCallback?: () => void |
| 84 | +) => boolean; |
| 85 | +``` |
| 86 | + |
| 87 | +- identityHotjar() |
| 88 | + |
| 89 | +1. `userId`: Unique user's identification as string |
| 90 | +2. `userInfo`: Stringfied user info of key-value pairs (note this must not be so long and deep according to [docs](https://help.hotjar.com/hc/en-us/articles/360033640653-Identify-API-Reference)) |
| 91 | +3. `logCallback`: Optional callback for logging wether Hotjar identified user or not |
| 92 | + |
| 93 | +```tsx |
| 94 | +identityHotjar: (userId: string, userInfo: string, logCallback?: () => void) => |
| 95 | + boolean; |
| 96 | +``` |
| 97 | + |
| 98 | +--- |
| 99 | + |
26 | 100 | ## License |
27 | 101 |
|
28 | | -MIT © [Olavo Parno](https://github.com/Olavo Parno) |
| 102 | +react-use-hotjar is [MIT licensed](./LICENSE). |
29 | 103 |
|
30 | 104 | --- |
31 | 105 |
|
|
0 commit comments