Does this have Typescript definitions?

[paigeflourin]

I want to implement this in my project. can this be used with typescript?

[SupremeTechnopriest]

Hi @paigeflourin, IdleTImer has been implemented with typescript before but the definitions were never committed. Here is a declaration file by @kamranayub:

declare module "react-idle-timer" {
  import * as React from "react";

  class IdleTimer extends React.Component<IdleTimerProps> {
    /**
     * Restore initial state and restart timer
     */
    reset(): void;

    /**
     * Store remaining time and stop timer
     */
    pause(): void;

    /**
     * Resumes a paused timer
     */
    resume(): void;

    /**
     * Time remaining before idle (number of ms)
     */
    getRemainingTime(): number;

    /**
     * How much time has elapsed (timestamp)
     */
    getElapsedTime(): number;

    /**
     * Last time the user was active
     */
    getLastActiveTime(): number;

    /**
     * Returns wether or not the user is idle
     */
    isIdle(): boolean;
  }

  namespace IdleTimer {

  }

  interface IdleTimerProps {
    ref: (ref: IdleTimer) => any;

    /**
     * Activity Timeout in milliseconds default: 1200000
     */
    timeout?: number;

    /**
     * DOM events to listen to default: see [default events](https://github.com/SupremeTechnopriest/react-idle-timer#default-events)
     */
    events?: string[];

    /**
     * Element reference to bind activity listeners to default: document
     */
    element?: Node;

    /**
     * Start the timer on mount default: true
     */
    startOnMount?: boolean;

    /**
     * Bind events passively default: true
     */
    passive?: boolean;

    /**
     * Capture events default: true
     */
    capture?: boolean;

    /**
     * Function to call when user becomes active
     */
    onActive?: () => void;

    /**
     * Function to call when user is idle
     */
    onIdle?: () => void;
  }

  export = IdleTimer;
}

You can see this closed issue. Feel free to open a Pull Request. I'll get it pushed up quick.

[sl45sms]

based on @kamranayub work to add the new properties , onAction throttle stopOnIdle

/// <reference types="react"/>

declare module "react-idle-timer" {
  import * as React from "react";

  class IdleTimer extends React.Component<IdleTimerProps> {
    /**
     * Restore initial state and restart timer
     */
    reset(): void;

    /**
     * Store remaining time and stop timer
     */
    pause(): void;

    /**
     * Resumes a paused timer
     */
    resume(): void;

    /**
     * Time remaining before idle (number of ms)
     */
    getRemainingTime(): number;

    /**
     * How much time has elapsed (timestamp)
     */
    getElapsedTime(): number;

    /**
     * Last time the user was active
     */
    getLastActiveTime(): number;

    /**
     * Returns wether or not the user is idle
     */
    isIdle(): boolean;
  }

  namespace IdleTimer {

  }

  interface IdleTimerProps {
    ref: (ref: IdleTimer) => any;

    /**
     * Activity Timeout in milliseconds default: 1200000
     */
    timeout?: number;


    /**
     * DOM events to listen to default: see [default events](https://github.com/SupremeTechnopriest/react-idle-timer#default-events)
     */
    events?: string[];

    /**
     * Function to call when user is idle
     */
    onIdle?: () => void;
    
    /**
     * Function to call when user becomes active
     */
    onActive?: () => void;    

    /**
     * Function to call when user have an activity
     */
    onAction?: () => void;

    /**
     * Debounce the onAction function by setting delay in milliseconds default: 0
     */
    debounce?: number;

    /**
     * Throttle the onAction function by setting delay in milliseconds default: 0
     */
    throttle?: number;

    /**
     * Element reference to bind activity listeners to default: document
     */
    element?: Node;

    /**
     * Start the timer on mount default: true
     */
    startOnMount?: boolean;

    /**
     * Once the user goes idle the IdleTimer will not reset on user input instead, reset() must be called manually to restart the timer default: false
     */
    stopOnIdle?: boolean;

    /**
     * Bind events passively default: true
     */
    passive?: boolean;

    /**
     * Capture events default: true
     */
    capture?: boolean;

  }

  export = IdleTimer;
}

[SupremeTechnopriest]

I added the typescript file to the repository and I will keep it maintained. See version 4.2.1

[mellis481]

@SupremeTechnopriest I'm having an issue with the ref property not existing for the IdleTimer component in my Typescript project. I'm seeing that it was removed with this commit with the note "remove ref completely from typedef. It is included with Component", but it seems like ref may have been removed from React's Component interface because I'm not seeing it.

[SupremeTechnopriest]

Let me check on that.

[SupremeTechnopriest]

Looks like it did get removed, adding it back and will roll out a patch shortly.

[SupremeTechnopriest]

@mellis481 Can you try out 4.6.3-rc.1 by npm i react-idle-timer@next? Should be all set now.

[mellis481]

Can you try out 4.6.3-rc.1 by npm i react-idle-timer@next? Should be all set now.

@SupremeTechnopriest Looks good!

[SupremeTechnopriest]

Cool! WIll be rolling this to the latest tag today hopefully. Just working on fixing a few other things. I will update you here when you can switch back.

[mellis481]

@SupremeTechnopriest Just checking in to see when the new package can be published.

[SupremeTechnopriest]

Hey @mellis481,

Hoping to have this out today. Just seeing what I can do about supporting CSP. RegeneratorRuntime is broken IMO, but looking for a work around. If I come up dry I will just release these fixes today and work on it for another patch.

[mellis481]

@SupremeTechnopriest Just wondering if this type fix can be separated from the other work so it can be released now.

[SupremeTechnopriest]

I should be rolling this out today. In the mean time you can use:

// @ts-ignore 

to ignore type checking for the ref. If they don't get back to me today on their issues, I will roll out a patch this evening.

[SupremeTechnopriest]

@mellis481 4.6.3 published to latest tag!