{"id":24211410,"url":"https://github.com/the-bugging/react-use-hotjar","last_synced_at":"2025-09-22T08:32:02.812Z","repository":{"id":40562166,"uuid":"286603584","full_name":"the-bugging/react-use-hotjar","owner":"the-bugging","description":"Adds Hotjar capabilities as custom hooks such as init, identify and stateChange","archived":false,"fork":false,"pushed_at":"2024-01-16T03:55:01.000Z","size":3592,"stargazers_count":32,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-01-11T09:47:13.251Z","etag":null,"topics":["custom-hooks","hooks","hotjar","identifying-users","react","statechange","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-use-hotjar","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/the-bugging.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["the-bugging"]}},"created_at":"2020-08-11T00:02:54.000Z","updated_at":"2024-11-04T13:28:56.000Z","dependencies_parsed_at":"2024-01-16T04:58:13.780Z","dependency_job_id":"4ebf627e-15e5-4db3-90f9-7dcabb216bbe","html_url":"https://github.com/the-bugging/react-use-hotjar","commit_stats":{"total_commits":77,"total_committers":7,"mean_commits":11.0,"dds":0.2727272727272727,"last_synced_commit":"82a3c8301458a91a0274fc029244c906550fe489"},"previous_names":["olavoparno/react-use-hotjar"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-bugging%2Freact-use-hotjar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-bugging%2Freact-use-hotjar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-bugging%2Freact-use-hotjar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-bugging%2Freact-use-hotjar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/the-bugging","download_url":"https://codeload.github.com/the-bugging/react-use-hotjar/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233835250,"owners_count":18737648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-hooks","hooks","hotjar","identifying-users","react","statechange","typescript"],"created_at":"2025-01-14T02:35:12.436Z","updated_at":"2025-09-22T08:31:57.419Z","avatar_url":"https://github.com/the-bugging.png","language":"TypeScript","funding_links":["https://github.com/sponsors/the-bugging"],"categories":[],"sub_categories":[],"readme":"\u003cimg align=\"right\" alt=\"traffic\" src=\"https://pv-badge.herokuapp.com/total.svg?repo_id=olavoparno-react-use-hotjar\"/\u003e\n\n# react-use-hotjar\n\n\u003e Adds [Hotjar](https://www.hotjar.com/) capabilities as custom hooks to your project\n\n[![NPM](https://img.shields.io/npm/v/react-use-hotjar.svg)](https://www.npmjs.com/package/react-use-hotjar)\n\n---\n\n| Statements                                                                    | Branches                                                                  | Functions                                                                  | Lines                                                                    |\n| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------ |\n| ![Statements](https://img.shields.io/badge/statements-100%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-100%25-brightgreen.svg?style=flat) |\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [Examples](#examples)\n- [Documentation](#documentation)\n- [Contributors](#contributors)\n- [License](#license)\n\n---\n\n## Install\n\n```bash\nnpm install --save react-use-hotjar\n```\n\n---\n\n## Usage\n\n- Initializing Hotjar (use it at the very top of your application)\n\n```tsx\nimport * as React from 'react';\nimport useHotjar from 'react-use-hotjar';\n\nconst myCustomLogger = console.info;\n\nconst HotjarReadyApp = () =\u003e {\n  const { initHotjar } = useHotjar();\n\n  React.useEffect(() =\u003e {\n    initHotjar(1234567, 6, false, myCustomLogger);\n  }, [initHotjar]);\n\n  return \u003cApp /\u003e;\n};\n```\n\n- Identifying Users (Use it wherever user's information is available. Send and object respecting [Identify API's rules](https://help.hotjar.com/hc/en-us/articles/360033640653-Identify-API-Reference#user-attribute-values))\n\n```tsx\nimport * as React from 'react';\nimport useHotjar from 'react-use-hotjar';\n\nconst myCustomLogger = console.log;\n\nconst MyCustomComponent = () =\u003e {\n  const { identifyHotjar } = useHotjar();\n\n  const handleUserInfo = (userInfo) =\u003e {\n    const { id, ...restUserInfo } = userInfo;\n\n    identifyHotjar(id, restUserInfo, myCustomLogger);\n  };\n};\n```\n\n---\n\n## Examples\n\n- You may find a running [example](./example) in this project which are served at [Github Pages](https://olavoparno.github.io/react-use-hotjar).\n- Also, a running codesandbox [codesandbox](https://codesandbox.io/s/react-use-hotjar-dkcjp)\n\n---\n\n## Documentation\n\n`useHotjar()` returns:\n\n- An object with the following keys:\n\n| key            | description                | arguments                                                                   | example                                                                                         |\n| -------------- | -------------------------- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |\n| readyState     | States if Hotjar is ready  | N/A                                                                         | N/A                                                                                             |\n| initHotjar     | Initialize method          | (hotjarId: number, hotjarVersion: number, hotjarDebug?: boolean, loggerCallback?: console[method]) | (1933331, 6, false, console.info)                                                                      |\n| 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) |\n| stateChange    | Relative path state change | (relativePath: string, loggerCallback?: console[method])                    | ('route/logged-route/user?registered=true')                                                     |\n| tagRecording   | Tag a recording            | (tags: string[], loggerCallback?: console[method])                          | (['tag1', 'tag2'])                                                                              |\n\n- initHotjar()\n\n1. `hotjarId`: Your Hotjar application ID ex.: 1933331\n2. `hotjarVersion`: Hotjar's current version ex.: 6\n3. `hotjarDebug`: Optional Debug Mode to see hotjar logs in console ex.: true\n4. `logCallback`: Optional callback for logging whether Hotjar is ready or not\n\n```tsx\ninitHotjar: (\n  hotjarId: string,\n  hotjarVersion: string,\n  hotjarDebug?: boolean,\n  logCallback?: () =\u003e void\n) =\u003e boolean;\n```\n\n- identifyHotjar()\n\n1. `userId`: Unique user's identification as string\n2. `userInfo`: 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)) (Please note: **The Identify API is only available to Business plan customers.**)\n3. `logCallback`: Optional callback for logging whether Hotjar identified user or not\n\n```tsx\nidentifyHotjar: (userId: string, userInfo: object, logCallback?: () =\u003e void) =\u003e\n  boolean;\n```\n\n- stateChange()\n\n1. `relativePath`: A change in a route specially for SPAs usage. [stateChange docs](https://help.hotjar.com/hc/en-us/articles/360034378534)\n2. `logCallback`: Optional callback for logging whether Hotjar stateChange was called or not\n\n```tsx\nstateChange: (relativePath: string, logCallback?: () =\u003e void) =\u003e boolean;\n```\n\n- tagRecording()\n\n1. `tags`: List of strings to associate with a recording that can be used for filtering\n2. `logCallback`: Optional callback for logging whether Hotjar tagRecording was called or not\n\n```tsx\ntagRecording: (tags: string[], logCallback?: () =\u003e void) =\u003e boolean;\n```\n\n---\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://olavoparno.github.io\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/7513162?v=4?s=70\" width=\"70px;\" alt=\"Olavo Parno\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOlavo Parno\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-olavoparno\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/the-bugging/react-use-hotjar/commits?author=olavoparno\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/the-bugging/react-use-hotjar/commits?author=olavoparno\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/gianpietro1\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/10046142?v=4?s=70\" width=\"70px;\" alt=\"Gianpietro Lavado\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGianpietro Lavado\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-hotjar/commits?author=gianpietro1\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://paqmind.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2128182?v=4?s=70\" width=\"70px;\" alt=\"Ivan Kleshnin\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIvan Kleshnin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-hotjar/commits?author=ivan-kleshnin\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-ivan-kleshnin\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://ajayvarghese.netlify.app/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/12490903?v=4?s=70\" width=\"70px;\" alt=\"Ajay Varghese\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAjay Varghese\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-hotjar/commits?author=ajayvarghese\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-ajayvarghese\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/honicole\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/11463889?v=4?s=70\" width=\"70px;\" alt=\"honicole\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ehonicole\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#tool-honicole\" title=\"Tools\"\u003e🔧\u003c/a\u003e \u003ca href=\"https://github.com/the-bugging/react-use-hotjar/commits?author=honicole\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-honicole\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/the-bugging/react-use-hotjar/commits?author=honicole\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/georgibakken\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16558100?v=4?s=70\" width=\"70px;\" alt=\"Georg Bakken Idland\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGeorg Bakken Idland\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-hotjar/commits?author=georgibakken\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-georgibakken\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/vith\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/3265539?v=4?s=70\" width=\"70px;\" alt=\"Jason Papakostas\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJason Papakostas\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-hotjar/issues?q=author%3Avith\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://luighiviton.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6945270?v=4?s=70\" width=\"70px;\" alt=\"Luighi Viton-Zorrilla\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuighi Viton-Zorrilla\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-hotjar/issues?q=author%3ALuighiV\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#maintenance-LuighiV\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.linkedin.com/in/quentin-luc-15161994/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5237095?v=4?s=70\" width=\"70px;\" alt=\"Quentin Luc\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eQuentin Luc\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-hotjar/commits?author=QuentinLuc\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n---\n\n## License\n\nreact-use-hotjar is [MIT licensed](./LICENSE).\n\n---\n\nThis hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-bugging%2Freact-use-hotjar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthe-bugging%2Freact-use-hotjar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-bugging%2Freact-use-hotjar/lists"}