React Tab Visibility

In this content, you can know when your browser tab change

import { useEffect, useState } from ‘react’

import { useDispatch } from ‘react-redux’

import { conferenceActions } from ‘@/features/conference/conference.slice’

const useTabVisibility = () => {

const [action, setAction] = useState(false)

const dispatch = useDispatch()

useEffect(() => {

const hidden = () => {

dispatch(conferenceActions.setTabVisibility(true))

setAction(true)

}

const visible = () => {

dispatch(conferenceActions.setTabVisibility(false))

setAction(false)

}

const handleVisibilityChange = () => {

document.hidden ? hidden() : visible()

}

document.addEventListener(‘visibilitychange’, handleVisibilityChange, false)

window.addEventListener(‘focus’, visible, false)

window.addEventListener(‘blur’, hidden, false)

return () => {

document.removeEventListener(‘visibilitychange’, handleVisibilityChange)

window.removeEventListener(‘focus’, visible)

window.removeEventListener(‘blur’, hidden)

}

}, [setAction])

}

export default useTabVisibility