:watch: 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

Install

``bash
yarn add react-interval-hook
`

or

`bash
npm install --save react-interval-hook
`

Basic Usage

`typescript jsx
import React from 'react';
import { useInterval } from 'react-interval-hook';

const Example = () => {
useInterval(() => {
console.log('I am called every second');
});
};
`

Advanced usage

Hook can accept various config option as well as return methods that allow you to control it behaviour.

$3

`
useInterval(callback [, intervalMs] [, options]): { start, stop, isActive }
`

$3

![Edit react-interval-hook](https://codesandbox.io/s/react-interval-hook-bi0kx?fontsize=14&hidenavigation=1&theme=dark)

`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 (


`js
import { ReactInterval } from 'react-interval';

const App = React.createClass({
getInitialState() {
return {count: 0};
},

render() {
const {count} = this.state;

return (


`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 (


const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(, appRoot);
`

Options


#### callback: PropTypes.func.isRequired

Function 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 |
| stop | [optional] triggerFinishCallback
- Type: boolean
- Default: true | void | Stops timer (not pause) after it was started using either _autoStart_ option or _start_ method |
| isActive | None | boolean | Return current timer status - is it running or not |

License

MIT © minwork