Skip to content

Commit 1ce9766

Browse files
minworkminwork
committed
refactor(react-interval-hook): Move hook code to react monorepo
1 parent aadaf67 commit 1ce9766

15 files changed

+809
-0
lines changed

‎packages/react-interval-hook/.eslintrc.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"extends": ["plugin:@nx/react", "../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7+
"rules": {}
8+
},
9+
{
10+
"files": ["*.ts", "*.tsx"],
11+
"rules": {}
12+
},
13+
{
14+
"files": ["*.js", "*.jsx"],
15+
"rules": {}
16+
}
17+
]
18+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019-present Krzysztof Kalkhoff
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

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

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# :watch: React Interval Hook
2+
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)
7+
![npm type definitions](https://img.shields.io/npm/types/react-interval-hook)
8+
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-interval-hook)](https://bundlephobia.com/result?p=react-interval-hook)
9+
[![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)
11+
12+
- Self-correcting ([explanation](https://stackoverflow.com/a/29972322/10322539))
13+
- Manageable (start, stop, isActive)
14+
- Thoroughly tested
15+
16+
## Install
17+
18+
```bash
19+
yarn add react-interval-hook
20+
```
21+
22+
or
23+
24+
```bash
25+
npm install --save react-interval-hook
26+
```
27+
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) |
113+
114+
### Management methods
115+
116+
`useInterval` hook return object with various management methods
117+
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 |
123+
124+
## License
125+
126+
MIT © [minwork](https://github.com/minwork)

‎packages/react-interval-hook/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "react-interval-hook",
3+
"version": "1.1.3",
4+
"description": "React hook for using self-correcting setInterval, augmented by management methods (start, stop, isActive)",
5+
"author": "minwork",
6+
"license": "MIT",
7+
"homepage": "https://github.com/minwork/react-interval-hook",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/minwork/react-interval-hook.git"
11+
},
12+
"keywords": [
13+
"interval",
14+
"setInterval",
15+
"react",
16+
"hook",
17+
"self-correcting"
18+
],
19+
"main": "./index.js",
20+
"types": "./index.d.ts",
21+
"exports": {
22+
".": {
23+
"import": "./index.mjs",
24+
"require": "./index.js",
25+
"types": "./index.d.ts"
26+
}
27+
},
28+
"files": [
29+
"**/*.{js,ts,mjs}",
30+
"LICENSE.md"
31+
],
32+
"peerDependencies": {
33+
"react": ">=16.8.0"
34+
}
35+
}

‎packages/react-interval-hook/project.json

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
{
2+
"name": "react-interval-hook",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "packages/react-interval-hook/src",
5+
"projectType": "library",
6+
"tags": [],
7+
"targets": {
8+
"lint": {
9+
"executor": "@nx/linter:eslint",
10+
"outputs": ["{options.outputFile}"],
11+
"options": {
12+
"lintFilePatterns": ["packages/react-interval-hook/**/*.{ts,tsx,js,jsx}"]
13+
}
14+
},
15+
"build": {
16+
"executor": "@nx/vite:build",
17+
"outputs": ["{options.outputPath}"],
18+
"defaultConfiguration": "production",
19+
"options": {
20+
"outputPath": "dist/packages/react-interval-hook"
21+
},
22+
"configurations": {
23+
"development": {
24+
"mode": "development"
25+
},
26+
"production": {
27+
"mode": "production"
28+
}
29+
}
30+
},
31+
"test": {
32+
"executor": "@nx/vite:test",
33+
"outputs": ["coverage/packages/react-interval-hook"],
34+
"options": {
35+
"passWithNoTests": true,
36+
"reportsDirectory": "../../coverage/packages/react-interval-hook"
37+
}
38+
},
39+
"release": {
40+
"executor": "nx:run-commands",
41+
"options": {
42+
"parallel": false,
43+
"commands": [
44+
{
45+
"command": "nx run react-interval-hook:test",
46+
"forwardAllArgs": false
47+
},
48+
{
49+
"command": "nx run react-interval-hook:build",
50+
"forwardAllArgs": false
51+
},
52+
{
53+
"command": "nx run react-interval-hook:semantic-release",
54+
"forwardAllArgs": true
55+
}
56+
]
57+
}
58+
},
59+
"semantic-release": {
60+
"executor": "@theunderscorer/nx-semantic-release:semantic-release",
61+
"options": {
62+
"changelog": true,
63+
"git": true,
64+
"npm": true,
65+
"github": true,
66+
"repositoryUrl": "https://github.com/minwork/react",
67+
"outputPath": "dist/packages/${PROJECT_NAME}",
68+
"tagFormat": "${PROJECT_NAME}-v${VERSION}",
69+
"commitMessage": "chore(release): Release ${PROJECT_NAME} v${nextRelease.version} [skip ci]",
70+
"branches": [
71+
{
72+
"name": "main",
73+
"channel": "latest"
74+
},
75+
{
76+
"name": "next",
77+
"channel": "next",
78+
"prerelease": "rc"
79+
},
80+
{
81+
"name": "develop",
82+
"channel": "alpha",
83+
"prerelease": "alpha"
84+
}
85+
],
86+
"releaseRules": [
87+
{ "breaking": true, "release": "major" },
88+
{ "type": "docs", "release": "patch" },
89+
{ "type": "refactor", "release": "patch" },
90+
{ "type": "style", "release": "patch" },
91+
{ "type": "perf", "release": "patch" },
92+
{ "type": "build", "release": "patch" }
93+
],
94+
"preset": "conventionalcommits",
95+
"presetConfig": {
96+
"types": [
97+
{ "type": "feat", "section": "Features" },
98+
{ "type": "fix", "section": "Bug Fixes" },
99+
{ "type": "chore", "hidden": true },
100+
{ "type": "docs", "section": "Documentation" },
101+
{ "type": "style", "hidden": true },
102+
{ "type": "refactor", "section": "Refactors" },
103+
{ "type": "build", "section": "Build config" },
104+
{ "type": "perf", "hidden": true },
105+
{ "type": "test", "hidden": true }
106+
]
107+
}
108+
}
109+
}
110+
}
111+
}

‎packages/react-interval-hook/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './lib';

‎packages/react-interval-hook/src/lib/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './react-interval-hook';
2+
export * from './react-interval-hook.types';

0 commit comments

Comments
 (0)