change website title dynamically

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.hidden) {
        // The page is not visible (user switched tabs)
        document.title = 'User switched tabs';
      } else {
        // The page is visible again
        document.title = 'Your Website Title';
      }
    };

    // Add event listener when the component mounts
    document.addEventListener('visibilitychange', handleVisibilityChange);

    // Clean up the event listener when the component unmounts
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []); // Empty dependency array ensures the effect runs only once on mount

  return (
    <div>
      {/* Your React component content goes here */}
    </div>
  );
};

export default App;