Skip to content

Commit 30e693c

Browse files
minworkminwork
committed
docs(react-interval-hook): Move documentation to GitBook
1 parent cb2ac6e commit 30e693c

File tree

1 file changed

+10
-98
lines changed

1 file changed

+10
-98
lines changed

‎packages/react-interval-hook/README.md‎

Lines changed: 10 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# :watch: React Interval Hook
22

3-
> React hook for using **self-correcting** `setInterval`, augmented by management methods (start, stop, isActive)
4-
5-
[![Build Status](https://travis-ci.org/minwork/react-interval-hook.svg?branch=master)](https://travis-ci.org/minwork/react-interval-hook)
6-
[![codecov](https://codecov.io/gh/minwork/react-interval-hook/branch/master/graph/badge.svg)](https://codecov.io/gh/minwork/react-interval-hook)
3+
[![codecov](https://codecov.io/gh/minwork/react/branch/main/graph/badge.svg?token=2KPMMSLDOM)](https://codecov.io/gh/minwork/react)
74
![npm type definitions](https://img.shields.io/npm/types/react-interval-hook)
85
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-interval-hook)](https://bundlephobia.com/result?p=react-interval-hook)
96
[![npm](https://img.shields.io/npm/v/react-interval-hook)](https://www.npmjs.com/package/react-interval-hook)
10-
[![GitHub](https://img.shields.io/github/license/minwork/react-interval-hook)](https://github.com/minwork/react-interval-hook/blob/master/LICENSE)
7+
8+
> React hook for using **self-correcting** `setInterval`, augmented by management methods
9+
10+
## Main features
1111

1212
- Self-correcting ([explanation](https://stackoverflow.com/a/29972322/10322539))
1313
- Manageable (start, stop, isActive)
@@ -25,102 +25,14 @@ or
2525
npm install --save react-interval-hook
2626
```
2727

28-
## Basic Usage
29-
30-
```typescript jsx
31-
import React from 'react';
32-
import { useInterval } from 'react-interval-hook';
33-
34-
const Example = () => {
35-
useInterval(() => {
36-
console.log('I am called every second');
37-
});
38-
};
39-
```
40-
41-
## Advanced usage
42-
43-
Hook can accept various config option as well as return methods that allow you to control it behaviour.
44-
45-
### Definition
46-
47-
```
48-
useInterval(callback [, intervalMs] [, options]): { start, stop, isActive }
49-
```
50-
51-
### Example
52-
53-
[![Edit react-interval-hook](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-interval-hook-bi0kx?fontsize=14&hidenavigation=1&theme=dark)
54-
55-
```typescript jsx
56-
import React, { useState } from 'react';
57-
import { useInterval } from 'react-interval-hook';
58-
59-
const AdvancedExample = () => {
60-
const { start, stop, isActive } = useInterval(
61-
() => {
62-
console.log('Callback every 500 ms');
63-
},
64-
500,
65-
{
66-
autoStart: false,
67-
immediate: false,
68-
selfCorrecting: false,
69-
onFinish: () => {
70-
console.log('Callback when timer is stopped');
71-
},
72-
}
73-
);
74-
const [active, setActive] = useState(isActive());
75-
const [triggerFinishCallback, setTriggerFinishCallback] = useState(true);
76-
77-
return (
78-
<div>
79-
<button type="button" onClick={start} id="start">
80-
Start
81-
</button>
82-
<button type="button" onClick={() => stop(triggerFinishCallback)} id="stop">
83-
Stop
84-
</button>
85-
<button type="button" onClick={() => setActive(isActive())} id="checkActive">
86-
Check active
87-
</button>
88-
<div id="active">Active: {active ? 1 : 0}</div>
89-
<div>
90-
<label htmlFor="trigger-finish-callback">
91-
<input
92-
id="trigger-finish-callback"
93-
type="checkbox"
94-
defaultChecked={triggerFinishCallback}
95-
onChange={() => setTriggerFinishCallback(current => !current)}
96-
/>
97-
Trigger finish callback
98-
</label>
99-
</div>
100-
</div>
101-
);
102-
};
103-
```
104-
105-
### Options
106-
107-
| Name | Type | Default | Description |
108-
| ----------- | :------: | :------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
109-
| autoStart | boolean | true | Start interval timer right after component is mounted |
110-
| immediate | boolean | false | Trigger _callback_ immediately after timer is started |
111-
| 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). |
112-
| onFinish | Function | () => {} | Called after timer is stopped (by _stop_ method or component unmount) |
28+
# Documentation
11329

114-
### Management methods
30+
Full documentation can be found [here](https://minwork.gitbook.io/react-interval-hook/)
11531

116-
`useInterval` hook return object with various management methods
32+
# Support
11733

118-
| Name | Arguments | Return | Description |
119-
| -------- | ----------------------------------------------------------------------------- | :-----: | -------------------------------------------------------------------------------------------------- |
120-
| start | None | void | Starts timer when _autoStart_ is set to `false` or after timer was stopped using _stop_ method |
121-
| stop | [optional]&nbsp;triggerFinishCallback<br/>- Type: boolean<br/>- Default: true | void | Stops timer (**not pause**) after it was started using either _autoStart_ option or _start_ method |
122-
| isActive | None | boolean | Return current timer status - is it running or not |
34+
If you like my work, consider making a [donation](https://github.com/sponsors/minwork) through Github Sponsors.
12335

124-
## License
36+
# License
12537

12638
MIT © [minwork](https://github.com/minwork)

0 commit comments

Comments
 (0)