🚀 Initial commit

.babelrc.js

@@ -0,0 +1,8 @@
+/**
+ * Configure Babel
+ *
+ * @see https://babeljs.io/docs/en/config-files
+ */
+module.exports = {
+  presets: ['@babel/env', '@babel/react']
+};

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+example/node_modules/**
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+example/.DS_Store
+example/.env
+example/npm-debug.log*
+example/yarn-debug.log*
+example/yarn-error.log*

.eslintrc.js

@@ -0,0 +1,36 @@
+/**
+ * Configure ESLint
+ *
+ * @see https://eslint.org/docs/user-guide/configuring
+ */
+module.exports = {
+  parser: 'babel-eslint',
+  env: {
+    browser: true,
+    es6: true
+  },
+  extends: ['airbnb', 'prettier', 'prettier/react', 'plugin:import/warnings'],
+  plugins: ['prettier', 'react-hooks', 'import'],
+  globals: {
+    document: true,
+    window: true
+  },
+  parserOptions: {
+    sourceType: 'module'
+  },
+  rules: {
+    'react/forbid-prop-types': 0,
+    'react/jsx-filename-extension': 0,
+    'react/react-in-jsx-scope': 0,
+    'class-methods-use-this': 0,
+    'no-unused-expressions': ['error', { allowTaggedTemplates: true }],
+    'react/no-unused-prop-types': 0,
+    'consistent-return': 0,
+    'prettier/prettier': 'error',
+    'react/destructuring-assignment': 0,
+    // Enforce React Hooks rules
+    // https://www.npmjs.com/package/eslint-plugin-react-hooks
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn'
+  }
+};

.gitignore

@@ -0,0 +1,23 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# builds
+build
+dist
+.rpt2_cache
+.next
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierignore

@@ -0,0 +1,2 @@
+node_modules/**
+example/node_modules/**

.prettierrc.js

@@ -0,0 +1,9 @@
+/**
+ * Configure Prettier
+ *
+ * @see https://prettier.io/docs/en/configuration.html#basic-configuration
+ */
+module.exports = {
+  singleQuote: true,
+  semi: true
+};

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.formatOnSave": true,
+  "files.eol": "\n",
+  "javascript.validate.enable": false,
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false,
+  "eslint.enable": true
+}

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [1.0.0] - 2019-08-5
+
+Initial Release

README.md

@@ -1 +1 @@
-# use-double-click
+# use-double-click

package.json

@@ -0,0 +1,88 @@
+{
+  "name": "use-double-click",
+  "version": "1.0.0",
+  "description": "A simple React hook for differentiating single and double clicks on the same component.",
+  "author": "Tim Ellenberger <timellenberger@gmail.com>",
+  "license": "MIT",
+  "repository": "tim-soft/use-double-click",
+  "bugs": {
+    "url": "https://github.com/tim-soft/use-double-click/issues"
+  },
+  "homepage": "https://timellenberger.com",
+  "keywords": [
+    "react",
+    "hook",
+    "double",
+    "click",
+    "ondblclick",
+    "onclick"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "jsnext:main": "dist/index.es.js",
+  "engines": {
+    "node": ">=8",
+    "npm": ">=5"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "prepare": "yarn run build"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{json,md}": [
+      "prettier --write",
+      "git add --force"
+    ],
+    "*.{js, jsx}": [
+      "prettier --write",
+      "eslint --no-ignore --fix",
+      "git add --force"
+    ]
+  },
+  "peerDependencies": {
+    "prop-types": ">=15.5.4",
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.5.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
+    "@babel/plugin-transform-runtime": "^7.5.0",
+    "@babel/preset-env": "^7.5.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "10.0.2",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.1",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "husky": "^3.0.0",
+    "lint-staged": "^9.2.0",
+    "prettier": "^1.18.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "rollup": "^1.18.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.0.1",
+    "rollup-plugin-filesize": "^6.1.1",
+    "rollup-plugin-node-resolve": "^5.2.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "rollup-plugin-uglify": "^6.0.2"
+  }
+}

rollup.config.js

@@ -0,0 +1,37 @@
+import path from 'path';
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import filesize from 'rollup-plugin-filesize';
+import resolve from 'rollup-plugin-node-resolve';
+
+import pkg from './package.json';
+
+const root = process.platform === 'win32' ? path.resolve('/') : '/';
+
+export default {
+  input: './src/index.js',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: true
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+      sourcemap: true
+    }
+  ],
+  external: id => !id.startsWith('.') && !id.startsWith(root),
+  plugins: [
+    babel({
+      exclude: 'node_modules/**',
+      runtimeHelpers: true
+    }),
+    resolve(),
+    commonjs({
+      include: 'node_modules/**'
+    }),
+    filesize()
+  ]
+};

src/index.js

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+/**
+ * A simple React hook for differentiating single and double clicks on the same component.
+ *
+ * @param {node} ref Dom node to watch for double clicks
+ * @param {number} [latency=300] The amount of time (in milliseconds) to wait before differentiating a single from a double click
+ * @param {function} onSingleClick A callback function for single click events
+ * @param {function} onDoubleClick A callback function for double click events
+ */
+const useDoubleClick = ({
+  ref,
+  latency = 300,
+  onSingleClick = () => null,
+  onDoubleClick = () => null
+}) => {
+  useEffect(() => {
+    const clickRef = ref.current;
+    let clickCount = 0;
+    const handleClick = e => {
+      clickCount += 1;
+
+      setTimeout(() => {
+        if (clickCount === 1) onSingleClick(e);
+        else if (clickCount === 2) onDoubleClick(e);
+
+        clickCount = 0;
+      }, latency);
+    };
+
+    // Add event listener for click events
+    clickRef.addEventListener('click', handleClick);
+
+    // Remove event listener
+    return () => {
+      clickRef.removeEventListener('click', handleClick);
+    };
+  });
+};
+
+export default useDoubleClick;