How do I make a tab highlight with React

Question

I want to know how to make a Tab highlight everytime an event happens, in this case, it would be a call. So, if the user isn't in my website in the moment, he will know that a event happenned. My useEffect looks like the following:

useEffect(() => {
  if (newCall < calls.length){
    setHighlight(true)
    setNewCall(calls.length)
  }
}, [calls.length])

Is this the sort of thing you're looking for? https://stackoverflow.com/questions/7587312/browser-tab-change-notification-like-when-you-get-a-new-gmail-e-mail-or-a-new-tw — Spencer Bard, Jul 22 '20 at 16:50
Yeah, kind of it. But, when I click back on the tab, I'd like the notifications to disappear — afr, Jul 22 '20 at 17:01
I believe you want to use `window.onfocus` as well as the `document.title` property. I added an answer below. — Spencer Bard, Jul 22 '20 at 17:16

score 0 · Answer 1 · answered Jul 22 '20 at 17:01

 useEffect(() => {
   if (newCall < calls.length){
   setHighlight(!'your state name')
   setInterval(()=>setHighlight(!'your state name'),2000)
   setNewCall(calls.length)
 }
 }, [calls.length])

The above fragment of code sets highlight and so does the user knows that an event has happened and after 2 seconds the highlight will be returned to the initial state.

Spencer Bard · Answer 2 · 2020-07-22T17:10:50.423

It seems as though the solution is a combination of:

Browser tab change notification like when you get a new gmail e-mail or a new tweet in Twitter

and

Detect If Browser Tab Has Focus


useEffect(() => {
   window.onfocus = function(){
      document.title = "Original Title"
   }
   return () => {
       window.onfocus = null;
   }
}, []);

useEffect(() => {
  if (newCall < calls.length){
    document.title = `Original Title (${calls.length} calls)`
  }
}, [calls.length])

How do I make a tab highlight with React

2 Answers2