`clarity-js` docs

[cloud-walker]

Hi all, I'm trying to use clarity-js instead of the official IIFE version, but I cannot find anywhere the docs on how to use it.

I'm missing something?

[tugbadeveloptica]

Hi all, I'm trying to use clarity-js instead of the official IIFE version, but I cannot find anywhere the docs on how to use it.

I'm missing something?

Hello, I want to use the repo in my project. Have you found a solution?

[cloud-walker]

Hello after various trial and error, chatting with GPT I've baked something like that (is a React project):

import {clarity} from 'clarity-js'
import {useEffect} from 'react'

import {envVars} from '~/envVars'

export function Clarity() {
  useEffect(() => {
    if (!envVars.VITE_CLARITY_PROJECT_ID) {
      return
    }

    const handleVisibilityChange = () => {
      if (document.hidden || document.visibilityState === 'hidden') {
        clarity.pause()
      } else {
        clarity.resume()
      }
    }

    clarity.consent() // we actually dont need to wait for user consent here as we are on OMP
    clarity.identify('unknown')
    clarity.start({
      projectId: envVars.VITE_CLARITY_PROJECT_ID,
      upload: 'https://m.clarity.ms/collect',
      content: true,
      track: true,
    })

    document.addEventListener('visibilitychange', handleVisibilityChange)

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange)
      clarity.stop()
    }
  }, [])

  return null
}

[tugbadeveloptica]

Hello after various trial and error, chatting with GPT I've baked something like that (is a React project):

import {clarity} from 'clarity-js'
import {useEffect} from 'react'

import {envVars} from '~/envVars'

export function Clarity() {
  useEffect(() => {
    if (!envVars.VITE_CLARITY_PROJECT_ID) {
      return
    }

    const handleVisibilityChange = () => {
      if (document.hidden || document.visibilityState === 'hidden') {
        clarity.pause()
      } else {
        clarity.resume()
      }
    }

    clarity.consent() // we actually dont need to wait for user consent here as we are on OMP
    clarity.identify('unknown')
    clarity.start({
      projectId: envVars.VITE_CLARITY_PROJECT_ID,
      upload: 'https://m.clarity.ms/collect',
      content: true,
      track: true,
    })

    document.addEventListener('visibilitychange', handleVisibilityChange)

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange)
      clarity.stop()
    }
  }, [])

  return null
}

thankk you veryy much , i will definitelyy try it