React-Idle-Timer: Show countdown of remaining time

Question

Is it possible to show a second-by-second countdown of remaining time in React-Idle-Timer?

This example they have on the site only shows it in certain scenarios, on Active (return from Idle) or some Action, but I need to show it statically on a site with no action, as the time elapses.

import React from 'react'
import { useIdleTimer } from 'react-idle-timer'
import App from './App'

export default function (props) {
  const handleOnIdle = event => {
    console.log('user is idle', event)
    console.log('last active', getLastActiveTime())
  }

  const handleOnActive = event => {
    console.log('user is active', event)
    console.log('time remaining', getRemainingTime())
  }

  const handleOnAction = event => {
    console.log('user did something', event)
  }

  const { getRemainingTime, getLastActiveTime } = useIdleTimer({
    timeout: 1000 * 60 * 15,
    onIdle: handleOnIdle,
    onActive: handleOnActive,
    onAction: handleOnAction,
    debounce: 500
  })

  return (
    <div>
      {/* your app here - HERE I need to show a second-by-second countdown */}
    </div>
  )
}

Answer 1

const [timeVal, setTimeVal] = useState(null); // This will hold current remaining time

// Declare vars from React Idle Timer hook
const { getRemainingTime, getLastActiveTime } = useIdleTimer({
    timeout: 1000 * 60 * 60, // 1-Hour Idle timeout
    onIdle: handleOnIdle,
    debounce: 500
})

// Declare timer that will store the remaining time
useEffect(() => {
    const interval = setInterval(() => {
        setTimeVal(getRemainingTime());
    }, 1000);
}, []);

// Return JSX
// ----------   

return (
    Remaining: {timeVal}<br/>
);