6

I'm sorry if I duplicate the question but I didn't find any solution for my problem.

What is the best way in React to detect switching tabs in browser or hide browser window?

I know there is a Page visibility API for it but how can I implement it in React component?

Here is the easiest way but I don't know is correct

import React, { Component } from 'react';

class Sample extends Component {
  handleBlur = () => {
    console.log('Blur');
  }

  handleFocus = () => {
    console.log('Focus');
  }

  render() {
    return (
      <div
        style={{ width: 400, height: 200 }}
        onBlur={this.handleBlur}
        onFocus={this.handleFocus}
      >
      test
      </div>
    );
  }
}

export default Sample;
hofshteyn
  • 1,272
  • 4
  • 16
  • 33

1 Answers1

8
let hidden = null;
let visibilityChange = null;
if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support 
  hidden = 'hidden';
  visibilityChange = 'visibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
  hidden = 'msHidden';
  visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
  hidden = 'webkitHidden';
  visibilityChange = 'webkitvisibilitychange';
}

class Hello extends React.Component {

  state = {
    actions: []
  }

  componentDidMount() {
    document.addEventListener(visibilityChange, this.handleVisibilityChange, false);
  }

  handleVisibilityChange = () => {
    if (document[hidden]) {
     this.setState({actions: [...this.state.actions, 'hide']});
    } else {
     this.setState({actions: [...this.state.actions, 'show']});
    }
  }

  componentWillUnmount()    {
    document.removeEventListener(visibilityChange, this.handleVisibilityChange);
  }

  render() {
    return (
      <ul>
      {
        this.state.actions.map((item, key) => <li key={key}>{item}</li>)
      }
    </ul>
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);
hofshteyn
  • 1,272
  • 4
  • 16
  • 33
Tareq El-Masri
  • 2,413
  • 15
  • 23
  • Exectlly as you said I don't want to watch for a focus on div element. But how can I apply this solution? I mean I should put this event on some? Because if I just add this to lifecycles and make a handle function it doesn't work. Please can you provide a working answer? – hofshteyn Oct 10 '18 at 17:18
  • I made a mistake also forgot to add browser compatibility, I edited my answer – Tareq El-Masri Oct 10 '18 at 17:43
  • nope, it's even doesn't pass into the `handleVisibiltyChange()` I created a fiddle example with code that you provided. can you see it? https://jsfiddle.net/69z2wepo/312134/ – hofshteyn Oct 10 '18 at 18:53
  • I edited code and also put the working example into jsfiddle https://jsfiddle.net/69z2wepo/312210/ – hofshteyn Oct 11 '18 at 07:15
  • I had a similar question to detect page-load or reload -- it has code example with React Hooks: https://stackoverflow.com/a/67565434/6908282 – Gangula Oct 23 '21 at 17:57