user-visibility

Plugin to see and manage the user page visibility

TIP

Useful to know if the user is displaying your website

Demo

Logs

TIP

Switch tabs for a second to see events

How to use it?

<template>
  <MazBtn @click="userVisibility.destroy()" color="danger">
    Destroy
  </MazBtn>

  <MazBtn @click="userVisibility.destroy()" color="danger">
    Destroy
  </MazBtn>

  <MazCard overflow-hidden style="width: 100%;">
    <h3>Logs</h3>

    <div v-for="({isVisible}, i) in events" :key="i">
      isVisible: {{isVisible}}
    </div>
  </MazCard>
</template>

<script lang="ts" setup>
  import { onMounted, ref, onBeforeUnmount } from 'vue'

  import { useUserVisibility } from 'maz-ui'

  const events = ref([])

  const callback = ({ isVisible }) => {
    console.log('isVisible', isVisible)
    events.value.push({ isVisible: isVisible })
  }

  const options = {
    immediate: true,
    once: false,
    timeout: 1000,
    ssr: true,
  }

  const userVisibility = useUserVisibility({ callback, options })

  onMounted(() => {
    userVisibility.start()
  })

  onBeforeUnmount(() => {
    userVisibility.destroy()
  })
</script>

Callback

export type UserVisibilyCallback = ({
  isVisible,
}: {
  isVisible: boolean
}) => void

Options

type UserVisibilyStrictOptions = {
  immediate: boolean
  timeout: number
  once: boolean
  ssr: boolean // if `true`
}

Default Options

const defaultOptions: UserVisibilyOptions = {
  immediate: false,
  timeout: 5000,
  once: false,
  ssr: false,
}

Actions

Start

Will start the user visibility tracking

userVisibility.start()

Destroy

Will destroy the instance and stop the tracking

userVisibility.destroy()