Nurturing Pluto's Martians

    @openpolitica/react-use-hotjar
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    traffic

    react-use-hotjar

    Adds Hotjar capabilities as custom hooks to your project

    NPM


    Statements Branches Functions Lines
    Statements Branches Functions Lines

    Table of Contents


    Install

    npm install --save react-use-hotjar

    Usage

    • 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);
      };
    };

    Examples


    Documentation

    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.: 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;

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Olavo Parno

    🤔 💻 ⚠️

    Gianpietro Lavado

    📖

    Ivan Kleshnin

    💻 🤔

    Ajay Varghese

    💻 🤔

    honicole

    🔧 💻 🤔 📖

    Georg Bakken Idland

    📖 🤔

    Jason Papakostas

    🐛

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


    License

    react-use-hotjar is MIT licensed.


    This hook is created using create-react-hook.

    Keywords

    none

    Install

    npm i @openpolitica/react-use-hotjar

    DownloadsWeekly Downloads

    3

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    19.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • luighiv