Nithya Rajan’s Post

View profile for Nithya Rajan, graphic

Lead Engineer | Expert in React, Angular, Three JS, Node.js | Built High-Impact Web Applications & Video Editors

Do you know how to detect when a user goes idle in your app? 𝗣𝗶𝗰𝘁𝘂𝗿𝗲 𝘁𝗵𝗶𝘀: someone is using your app, then suddenly they stop. Maybe they've walked away or got distracted. How do you catch that moment? 𝗛𝗲𝗿𝗲'𝘀 𝘄𝗵𝗮𝘁 𝘆𝗼𝘂 𝗰𝗮𝗻 𝗱𝗼: • Keep an eye on mouse movement using 𝘮𝘰𝘶𝘴𝘦𝘮𝘰𝘷𝘦 events. • Listen for keyboard activity with 𝘬𝘦𝘺𝘥𝘰𝘸𝘯 events. • Set a timer to decide when "idle" starts using 𝘴𝘦𝘵𝘛𝘪𝘮𝘦𝘰𝘶𝘵. 𝗔𝗻𝗱 𝗶𝗳 𝘆𝗼𝘂 𝘄𝗮𝗻𝘁 𝘁𝗼 𝗴𝗼 𝗱𝗲𝗲𝗽𝗲𝗿: • Track scrolling behavior with the 𝘴𝘤𝘳𝘰𝘭𝘭 event. • Detect window focus changes using 𝘷𝘪𝘴𝘪𝘣𝘪𝘭𝘪𝘵𝘺𝘤𝘩𝘢𝘯𝘨𝘦. • Notice touch inactivity with 𝘵𝘰𝘶𝘤𝘩𝘴𝘵𝘢𝘳𝘵 and 𝘵𝘰𝘶𝘤𝘩𝘦𝘯𝘥. Here’s a simple React hook to make it happen:

  • text
Umar Naseem

Senior Full Stack Engineer | Ruby on Rails | React | Python | NodeJS| AWS | Microservices & Databases | Delivering Scalable Solutions from Frontend to Backend

2mo

Insightful Nithya

To view or add a comment, sign in

Explore topics