Error when importing IdleTimer from 'react-idle-timer'

Question

I am developing a React app with NodeJS. I am currently working on being able to log out a user after some minutes of inactivity, and I'm following this tutorial: https://www.youtube.com/watch?v=_wgCPufTAYI. I didn't get too far, because I get this error when I'm importing IdleTimer. Also, I did 'npm install react-idle-timer', so that shouldn't be the cause. I couldn't figure out why that is, so any help is much appreciated! Thank you

This is where the error happens

import React, { useRef } from 'react';
import IdleTimer from 'react-idle-timer';

function SessionTimeout() {
    const idleTimerRef = useRef(null);

    const onIdle = () => {
        console.log('User is idle');
    }

  return (
    <div>
        <IdleTimer ref={idleTimerRef} timeout={5 * 1000} onIdle={onIdle}></IdleTimer>
    </div>
  )
}

export default SessionTimeout

And this is the error

ERROR in ./src/pages/SessionTimeout.js 20:35-44
export 'default' (imported as 'IdleTimer') was not found in 'react-idle-timer' (possible exports: IdleTimerConsumer, IdleTimerContext, IdleTimerProvider, createMocks, useIdleTimer, useIdleTimerContext, withIdleTimer, workerTimers)
 @ ./src/App.js 21:0-52
 @ ./src/index.js 7:0-24 11:33-36

webpack 5.70.0 compiled with 1 error and 1 warning in 266 ms

Answer 1

change

import IIdleTimer  from 'react-idle-timer'

into

import { IIdleTimer } from 'react-idle-timer'

The library doesn't export a default value

It seems that they change their api in v5 so now you have to import the hook like this

import {useIdleTimer} from 'react-idle-timer'
....
// Hook
const idleTimer = useIdleTimer({
  crossTab: true
})

// Higher Order Component Wrapped 
<IdleTimer crossTab />

Answer 2

Formatting Mithlesh Kumar's code snippet:

import { useRef } from "react";
import { useIdleTimer } from "react-idle-timer";
export default function IdleComponent() {
  const idleTimeRef = useRef(null);
  const onIdle = () => {
    console.log("Log Out");
  };
  const idleTimer = useIdleTimer({
    crossTab: true,
    ref: idleTimeRef,
    timeout: 60 * 3 * 1000,
    onIdle: onIdle,
  });
  return <div idleTimer={idleTimer}></div>;
}

Refer to the documentation for more details

Answer 3

`import { useIdleTimer } from 'react-idle-timer';`
export default function IdleComponent() {
const idleTimeRef = useRef(null);
const onIdle = () => {
console.log('Log Out');)};
const idleTimer = useIdleTimer({
crossTab: true,
ref: idleTimeRef,
timeout: 60 * 3 * 1000,
onIdle: onIdle})
return (<div idleTimer={idleTimer}></div>);
}