React hook for using self-correcting setInterval, augmented by management methods (start, stop, isActive) and also using React Class Based Component
npm install meet-hour-react-interval-hook> React hook for using self-correcting setInterval, augmented by management methods (start, stop, isActive)


!npm type definitions



- Self-correcting (explanation)
- Manageable (start, stop, isActive)
- Thoroughly tested
``bash`
yarn add @zaki1001/react-interval
or
`bash`
npm install --save @zaki1001/react-interval
`typescript jsx
import React from 'react';
import { useInterval } from 'react-interval-hook';
const Example = () => {
useInterval(() => {
console.log('I am called every second');
});
};
`
Hook can accept various config option as well as return methods that allow you to control it behaviour.
``
useInterval(callback [, intervalMs] [, options]): { start, stop, isActive }

`typescript jsx
import React, { useState } from 'react';
import { useInterval } from 'react-interval-hook';
const AdvancedExample = () => {
const { start, stop, isActive } = useInterval(
() => {
console.log('Callback every 500 ms');
},
500,
{
autoStart: false,
immediate: false,
selfCorrecting: false,
onFinish: () => {
console.log('Callback when timer is stopped');
},
}
);
const [active, setActive] = useState(isActive());
const [triggerFinishCallback, setTriggerFinishCallback] = useState(true);
return (
Usage For React Class Based Components
$3
Start counting on render`js
import { ReactInterval } from 'react-interval';const App = React.createClass({
getInitialState() {
return {count: 0};
},
render() {
const {count} = this.state;
return (
{count}
callback={() => this.setState({count: this.state.count + 1})} />
);
}
});
`$3
Change timeout on the fly, start and stop counting`js
import React from 'react';
import ReactDOM from 'react-dom';
import { ReactInterval } from 'react-interval';const App = React.createClass({
getInitialState() {
return {
enabled: false,
timeout: 1000,
count: 0
};
},
render() {
const {timeout, enabled, count} = this.state;
return (
callback={() => this.setState({count: this.state.count + 1})} /> onChange={({target: {value}}) => this.setState({timeout: parseInt(value, 10)})} />
{count}
);
}
});const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render( , appRoot);
`Options
####
callback: PropTypes.func.isRequiredFunction repeatedly called after timeout
####
enabled: PropTypes.bool (default: false)Should start timer?
####
timeout: PropTypes.number (default: 1000)Timeout before each
callback call
$3
| Name | Type | Default | Description |
| ----------- | :------: | :------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| autoStart | boolean | true | Start interval timer right after component is mounted |
| immediate | boolean | false | Trigger _callback_ immediately after timer is started |
| selfCorrecting | boolean | true | Self correct time intervals between subsequent _callback_ invocations to reflect actual time elapsed (setInterval and setTimeout are not accurate and tend to drift). |
| onFinish | Function | () => {} | Called after timer is stopped (by _stop_ method or component unmount) |
$3
useInterval hook return object with various management methods| Name | Arguments | Return | Description |
| -------- | ----------------------------------------------------------------------------- | :-----: | -------------------------------------------------------------------------------------------------- |
| start | None | void | Starts timer when _autoStart_ is set to
false` or after timer was stopped using _stop_ method |MIT © minwork