Skip to content

Commit 2b03adb

Browse files
committed
docs(readme): update readme
1 parent 8f23a80 commit 2b03adb

File tree

1 file changed

+81
-7
lines changed

1 file changed

+81
-7
lines changed

README.md

Lines changed: 81 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,105 @@
11
# react-use-hotjar
22

3-
> Add Hotjar capabilities as hooks
3+
> Add [Hotjar](https://www.hotjar.com/) capabilities as custom hooks to your project
44
55
[![NPM](https://img.shields.io/npm/v/react-use-hotjar.svg)](https://www.npmjs.com/package/react-use-hotjar)
66

7+
---
8+
9+
## Table of Contents
10+
11+
- [Install](#install)
12+
- [Usage](#usage)
13+
- [Documentation](#documentation)
14+
- [License](#license)
15+
16+
---
17+
718
## Install
819

920
```bash
1021
npm install --save react-use-hotjar
1122
```
1223

24+
---
25+
1326
## Usage
1427

28+
- Initializing Hotjar
29+
1530
```tsx
16-
import * as React from "react";
31+
import * as React from 'react';
1732

18-
import { useMyHook } from "react-use-hotjar";
33+
import { useHotjar } from 'react-use-hotjar';
1934

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 />;
2345
};
2446
```
2547

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+
26100
## License
27101

28-
MIT © [Olavo Parno](https://github.com/Olavo Parno)
102+
react-use-hotjar is [MIT licensed](./LICENSE).
29103

30104
---
31105

0 commit comments

Comments
 (0)