Skip to content

Commit 2a858cf

Browse files
tim-softtim-soft
committed
🚀 Initial commit
1 parent 1d1f252 commit 2a858cf

14 files changed

+3972
-1
lines changed

‎.babelrc.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* Configure Babel
3+
*
4+
* @see https://babeljs.io/docs/en/config-files
5+
*/
6+
module.exports = {
7+
presets: ['@babel/env', '@babel/react']
8+
};

‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.eslintignore

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
example/node_modules/**
6+
7+
# production
8+
/build
9+
/dist
10+
11+
# misc
12+
.DS_Store
13+
.env
14+
npm-debug.log*
15+
yarn-debug.log*
16+
yarn-error.log*
17+
18+
example/.DS_Store
19+
example/.env
20+
example/npm-debug.log*
21+
example/yarn-debug.log*
22+
example/yarn-error.log*

‎.eslintrc.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* Configure ESLint
3+
*
4+
* @see https://eslint.org/docs/user-guide/configuring
5+
*/
6+
module.exports = {
7+
parser: 'babel-eslint',
8+
env: {
9+
browser: true,
10+
es6: true
11+
},
12+
extends: ['airbnb', 'prettier', 'prettier/react', 'plugin:import/warnings'],
13+
plugins: ['prettier', 'react-hooks', 'import'],
14+
globals: {
15+
document: true,
16+
window: true
17+
},
18+
parserOptions: {
19+
sourceType: 'module'
20+
},
21+
rules: {
22+
'react/forbid-prop-types': 0,
23+
'react/jsx-filename-extension': 0,
24+
'react/react-in-jsx-scope': 0,
25+
'class-methods-use-this': 0,
26+
'no-unused-expressions': ['error', { allowTaggedTemplates: true }],
27+
'react/no-unused-prop-types': 0,
28+
'consistent-return': 0,
29+
'prettier/prettier': 'error',
30+
'react/destructuring-assignment': 0,
31+
// Enforce React Hooks rules
32+
// https://www.npmjs.com/package/eslint-plugin-react-hooks
33+
'react-hooks/rules-of-hooks': 'error',
34+
'react-hooks/exhaustive-deps': 'warn'
35+
}
36+
};

‎.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
# See https://help.github.com/ignore-files/ for more about ignoring files.
3+
4+
# dependencies
5+
node_modules
6+
7+
# builds
8+
build
9+
dist
10+
.rpt2_cache
11+
.next
12+
13+
# misc
14+
.DS_Store
15+
.env
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/**
2+
example/node_modules/**

‎.prettierrc.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Configure Prettier
3+
*
4+
* @see https://prettier.io/docs/en/configuration.html#basic-configuration
5+
*/
6+
module.exports = {
7+
singleQuote: true,
8+
semi: true
9+
};

‎.vscode/settings.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"editor.formatOnSave": true,
3+
"files.eol": "\n",
4+
"javascript.validate.enable": false,
5+
"editor.tabSize": 2,
6+
"editor.detectIndentation": false,
7+
"eslint.enable": true
8+
}

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
## [1.0.0] - 2019-08-5
6+
7+
Initial Release

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
# use-double-click
1+
# use-double-click

‎package.json

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
{
2+
"name": "use-double-click",
3+
"version": "1.0.0",
4+
"description": "A simple React hook for differentiating single and double clicks on the same component.",
5+
"author": "Tim Ellenberger <[email protected]>",
6+
"license": "MIT",
7+
"repository": "tim-soft/use-double-click",
8+
"bugs": {
9+
"url": "https://github.com/tim-soft/use-double-click/issues"
10+
},
11+
"homepage": "https://timellenberger.com",
12+
"keywords": [
13+
"react",
14+
"hook",
15+
"double",
16+
"click",
17+
"ondblclick",
18+
"onclick"
19+
],
20+
"main": "dist/index.cjs.js",
21+
"module": "dist/index.es.js",
22+
"jsnext:main": "dist/index.es.js",
23+
"engines": {
24+
"node": ">=8",
25+
"npm": ">=5"
26+
},
27+
"scripts": {
28+
"build": "rollup -c",
29+
"start": "rollup -c -w",
30+
"prepare": "yarn run build"
31+
},
32+
"husky": {
33+
"hooks": {
34+
"pre-commit": "lint-staged"
35+
}
36+
},
37+
"lint-staged": {
38+
"*.{json,md}": [
39+
"prettier --write",
40+
"git add --force"
41+
],
42+
"*.{js, jsx}": [
43+
"prettier --write",
44+
"eslint --no-ignore --fix",
45+
"git add --force"
46+
]
47+
},
48+
"peerDependencies": {
49+
"prop-types": ">=15.5.4",
50+
"react": ">=16.8",
51+
"react-dom": ">=16.8"
52+
},
53+
"devDependencies": {
54+
"@babel/core": "^7.5.4",
55+
"@babel/plugin-proposal-class-properties": "^7.5.0",
56+
"@babel/plugin-proposal-object-rest-spread": "^7.5.4",
57+
"@babel/plugin-transform-runtime": "^7.5.0",
58+
"@babel/preset-env": "^7.5.4",
59+
"@babel/preset-react": "^7.0.0",
60+
"babel-eslint": "10.0.2",
61+
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
62+
"cross-env": "^5.2.0",
63+
"eslint": "^5.16.0",
64+
"eslint-config-airbnb": "^17.1.1",
65+
"eslint-config-prettier": "^6.0.0",
66+
"eslint-plugin-import": "^2.18.0",
67+
"eslint-plugin-jsx-a11y": "^6.2.3",
68+
"eslint-plugin-prettier": "^3.1.0",
69+
"eslint-plugin-react": "^7.14.2",
70+
"eslint-plugin-react-hooks": "^1.6.1",
71+
"husky": "^3.0.0",
72+
"lint-staged": "^9.2.0",
73+
"prettier": "^1.18.2",
74+
"react": "^16.8.6",
75+
"react-dom": "^16.8.6",
76+
"rollup": "^1.18.0",
77+
"rollup-plugin-babel": "^4.3.3",
78+
"rollup-plugin-commonjs": "^10.0.1",
79+
"rollup-plugin-filesize": "^6.1.1",
80+
"rollup-plugin-node-resolve": "^5.2.0"
81+
},
82+
"files": [
83+
"dist"
84+
],
85+
"dependencies": {
86+
"rollup-plugin-uglify": "^6.0.2"
87+
}
88+
}

‎rollup.config.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import path from 'path';
2+
import babel from 'rollup-plugin-babel';
3+
import commonjs from 'rollup-plugin-commonjs';
4+
import filesize from 'rollup-plugin-filesize';
5+
import resolve from 'rollup-plugin-node-resolve';
6+
7+
import pkg from './package.json';
8+
9+
const root = process.platform === 'win32' ? path.resolve('/') : '/';
10+
11+
export default {
12+
input: './src/index.js',
13+
output: [
14+
{
15+
file: pkg.main,
16+
format: 'cjs',
17+
sourcemap: true
18+
},
19+
{
20+
file: pkg.module,
21+
format: 'es',
22+
sourcemap: true
23+
}
24+
],
25+
external: id => !id.startsWith('.') && !id.startsWith(root),
26+
plugins: [
27+
babel({
28+
exclude: 'node_modules/**',
29+
runtimeHelpers: true
30+
}),
31+
resolve(),
32+
commonjs({
33+
include: 'node_modules/**'
34+
}),
35+
filesize()
36+
]
37+
};

‎src/index.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { useEffect } from 'react';
2+
3+
/**
4+
* A simple React hook for differentiating single and double clicks on the same component.
5+
*
6+
* @param {node} ref Dom node to watch for double clicks
7+
* @param {number} [latency=300] The amount of time (in milliseconds) to wait before differentiating a single from a double click
8+
* @param {function} onSingleClick A callback function for single click events
9+
* @param {function} onDoubleClick A callback function for double click events
10+
*/
11+
const useDoubleClick = ({
12+
ref,
13+
latency = 300,
14+
onSingleClick = () => null,
15+
onDoubleClick = () => null
16+
}) => {
17+
useEffect(() => {
18+
const clickRef = ref.current;
19+
let clickCount = 0;
20+
const handleClick = e => {
21+
clickCount += 1;
22+
23+
setTimeout(() => {
24+
if (clickCount === 1) onSingleClick(e);
25+
else if (clickCount === 2) onDoubleClick(e);
26+
27+
clickCount = 0;
28+
}, latency);
29+
};
30+
31+
// Add event listener for click events
32+
clickRef.addEventListener('click', handleClick);
33+
34+
// Remove event listener
35+
return () => {
36+
clickRef.removeEventListener('click', handleClick);
37+
};
38+
});
39+
};
40+
41+
export default useDoubleClick;

0 commit comments

Comments
 (0)