Question 73044 in Reactjs Question posted in
The new location for the React Documentation can be found here.

MS Teams Personal App – Detect User Leaving the Personal App – Reactjs

I have created a MS Teams personal app using react and fluent UI react northstar library.

There is a requirement from the client to generate a KPI for each user’s time spent inside the app.

I can get the user in time for the app, but the question is

How can I detect the user has leave the app by clicking outside the app?

For Example, user is in my personal app and then he clicks on chat, calls, calendar etc. then I need to detect that, he has left the personal app.

Any help is appreciated in this case.

Thanks

Tags:

2

Answers


  1. 0

    I don’t think there’s anything out of the box for this, but you could use something like Reactive Extensions (nothing to do with "react" framework, incidentally) to keep a channel open between the front end and back end, to see if the connection breaks. See https://rxjs.dev/

    Login or Signup to reply.
  2. 0

    To detect when a user leaves your MS Teams personal app, you can use the onBlur event to detect when the app loses focus. You can add an event listener to the window object that listens for the blur event and calls a function to record the time spent by the user in your app.

    Here’s an example code snippet:

    import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.addEventListener('blur', handleAppBlur);

    return () => {
      window.removeEventListener('blur', handleAppBlur);
    };
  }, []);

  function handleAppBlur() {
    // Record the time spent by the user in your app
    // when the app loses focus
  }

  return (
    // Your app code
  );
}

export default App;

    This code adds an event listener for the blur event when the component mounts and removes it when the component unmounts. The handleAppBlur function is called when the app loses focus, and you can record the time spent by the user in your app in this function.

    Note that this approach will detect when the user clicks outside your app in the same browser window or tab, but it won’t detect if the user switches to a different browser window or tab.

    You can find about JS blur event here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search