Skip to content
Menu
TechFacts007.in
  • Information Zone
  • Reviews
    • Apps Reviews
    • PC’s
  • Gadgets
  • Hosting
    • Domain and Hosting
      • cPanel
    • WordPress
  • More
    • Tech Facts
    • Tips & Tricks
TechFacts007.in
react js hook
August 17, 2022August 26, 2022

React Hook To Check If User Has Changed/Minimize the Browser Tab

Today we will learn how to develop a Custom React-Js hook to determine whether the user has changed the browser tab or minimized the browser window. This hook will work for Chrome, Opera, Firefox, Edge, Safari etc…

Before we start we need to understand the concept of React-Js hook. React hooks provide super power to react library. A hook can be used to maintain the state of the application (useState()) or to execute some code when component mounts on the DOM, Updates on the DOM, Unmount from the DOM (useEffect()).

Here I used only two hooks, useState, and useEffect but this does not mean that React-Js power is limited. We can develop our own Hook.

I already posted an article about another hook to check if the user has a mobile device, Tablet or Desktop. And today we are here to develop another hook.

Let’s Start


Hook Development

  • Create a file with the name useIsTabVisible.js and save this into your “src” directory.
  • Now Copy and Paste the Code into your file.
import { useState, useEffect, useCallback } from 'react'

function useIsTabVisible() {
    const [isVisible, setIsVisible] = useState(!document.hidden)

    const handleVisibility = useCallback(() => {
        setIsVisible(!document.hidden)
    }, [])

    useEffect(() => {
        document.addEventListener('visibilitychange', handleVisibility)

        return () => {
            document.removeEventListener('visibilitychange', handleVisibility)
        }
    }, [handleVisibility])

    return isVisible // returns boolean
}

export default useIsTabVisible

That’s it. Our hook is ready to use. Now we can use this hook in our project.

 


 

Hook Usage

Here is the code to use the hook in our react js component.

 

function MyComponent() {
    const isVisible = isTabVisible()
    return <>
        {isVisible && <span>Status is Visible</span>}
    </>
}

 

Hook Use Case

  • You can use this hook to check if the user has changed the tab or lost focus from the browser tab.
  • This type of hook can mainly be used on online exam portals where candidates are not allowed to change the browser tab.
  • to detect how much time the user has lost focus from your page. Just send a request to the server and store the status data.

You must check out this article: How to check if the user has Mobile/Tablet/Desktop.

That’s all for today. I hope you have learned something interesting and useful. If you still have any doubt related to this hook/article please comment below. If you have any suggestions or ideas let us know in the comment section.


Thank You ❤️

Post Views: 222

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Trending

  • Tech Facts
    52.376552,5.198303(Dead Body Found) Google Map
  • Information Zone
    Create Sitemap for React.Js Web App – Sitemap.xml for react app
  • Information Zone, Programming Languages, Tutorials
    React Hook To Check If User Has Changed/Minimize the Browser Tab
  • How to, Information Zone, Tips & Tricks
    Encrypt Javascript and CSS Code – Hide Original Code from Users
  • Codes, Programming Languages
    Find out if you can reach the last tile – Program Code
  • Tech Facts
    In 1956, 5 megabytes (5MB) of data weighed a Ton.
  • How to, Information Zone, Tips & Tricks
    Download any paid Software. Get any software free for lifetime
  • PC's, Tips & Tricks
    Mount and Unmount Virtual Hard Disk (CMD Command and batch File Method)

Recent Posts

  • Worker Threads in JavaScript: Enhancing Performance with Parallelism July 31, 2023
  • Create Sitemap for React.Js Web App – Sitemap.xml for react app May 27, 2023
  • The Importance of Sitemap.xml: Enhancing Website Visibility and SEO May 27, 2023
  • Web Page Generation – Difference between SSR, CSR and SSG May 26, 2023
  • React.js vs. Next.js – Choosing the Right Framework for Your Web Development Needs May 26, 2023
  • NGINX vs. Apache: Exploring the Differences and Choosing the Right Web Server May 21, 2023
  • Setting Up NGINX on Ubuntu Server and Activating a Domain on NGINX Server May 21, 2023
  • Functional Component vs Class Component in React.Js January 18, 2023
  • React.Js Lifecycle Methods January 18, 2023
  • What is componentDidMount and useEffect with Example January 18, 2023

Categories

  • Apps Reviews (4)
  • Gadgets (4)
  • Hack With Us (2)
  • Hosting (12)
    • Domain and Hosting (7)
      • cPanel (5)
    • Wordpress (5)
  • How to (11)
  • Information Zone (65)
  • PC's (7)
  • Product Reviews (11)
  • Programming Languages (11)
    • Codes (5)
    • Tutorials (6)
  • Smart Phones (8)
  • Tech Facts (13)
  • Tips & Tricks (13)

Browse By Date

September 2023
M T W T F S S
 123
45678910
11121314151617
18192021222324
252627282930  
« Jul    

More

Contact Us
Privacy Policy
About Us
About Admin

Advertisement

Other Sites

ShanuTheWebDev.in
QrCode.ShanuTheWebDev.in
©2023 TechFacts007.in | Powered by WordPress and Superb Themes!