Comments (14)
Looks like it did get removed, adding it back and will roll out a patch shortly.
from react-idle-timer.
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.
from react-idle-timer.
@mellis481 4.6.3
published to latest
tag!
from react-idle-timer.
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.
from react-idle-timer.
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;
}
from react-idle-timer.
I added the typescript file to the repository and I will keep it maintained. See version 4.2.1
from react-idle-timer.
@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.
from react-idle-timer.
Let me check on that.
from react-idle-timer.
@mellis481 Can you try out 4.6.3-rc.1
by npm i react-idle-timer@next
? Should be all set now.
from react-idle-timer.
Can you try out 4.6.3-rc.1 by npm i react-idle-timer@next? Should be all set now.
@SupremeTechnopriest Looks good!
from react-idle-timer.
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.
from react-idle-timer.
@SupremeTechnopriest Just checking in to see when the new package can be published.
from react-idle-timer.
@SupremeTechnopriest Just wondering if this type fix can be separated from the other work so it can be released now.
from react-idle-timer.
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.
from react-idle-timer.
Related Issues (20)
- sync issue while the first tab in "prompted" state.
- π Module parse failed: Unexpected token (1:6657) You may need an appropriate loader to handle this file type HOT 1
- Prevent timeout countdown reset when modal appears and when there is user activity HOT 1
- π Update types to prevent @typescript-eslint/unbound-method errors HOT 4
- π Importing useIdleTimer throws error during compilation with "type": "module" HOT 7
- Not working in Microsoft edge browser, using idle timer version 5.7.2π HOT 1
- π react-idle-timer node modules issue HOT 4
- When video is running activity is not detectedβ‘οΈ HOT 1
- π Types error maybe?
- Is there something to direct to specific page once timer expires β‘οΈ HOT 2
- Reset method does nothing HOT 1
- Issue when resetting timerπ
- π Module Parse Failed with babel-loader HOT 1
- Has onActive() condition changed?π HOT 3
- β‘οΈ lastActiveTab state: a state to know whether this is the last active tab or not HOT 1
- Is there a way for the use to be considered idle when the web page loses focus? β‘οΈ HOT 7
- π React 17 - Timer starting without timer.start() although startManually prop is true
- π Reset Method Increases the Original Timeout Temporarily
- π onPrompt does not fire if the promptBeforeIdle time occurs while the computer is sleeping HOT 2
- π IdleTimer constantly triggering onIdle callback HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-idle-timer.