The one with mouse and touch events

Author: ooade

README.md

@@ -17,6 +17,10 @@
 yarn add react-click-away-listener
 ```
 
+- It's quite small in size.
+- It's built with TypeScript.
+- It supports both Mouse and Touch Events.
+
 ## Usage
 
 ```jsx

__tests__/index.tsx

@@ -5,7 +5,9 @@ import ClickAwayListener from '../src';
 describe('ClickAway Listener', () => {
 	it('should render properly', () => {
 		const { getByText } = render(
-			<ClickAwayListener onClickAway={() => null}>Hello World</ClickAwayListener>
+			<ClickAwayListener onClickAway={() => null}>
+				Hello World
+			</ClickAwayListener>
 		);
 		expect(getByText(/Hello World/i)).toBeTruthy();
 	});
@@ -22,48 +24,82 @@ describe('ClickAway Listener', () => {
 			</React.Fragment>
 		);
 
+		fireEvent.click(getByText(/A button/i));
+		fireEvent.click(getByText(/A text element/i));
+		fireEvent.click(getByText(/Hello World/i));
+		expect(fakeHandleClick).toBeCalledTimes(2);
+	});
+
+	it('works with different mouse events', () => {
+		const fakeHandleClick = jest.fn();
+		const { getByText } = render(
+			<React.Fragment>
+				<ClickAwayListener onClickAway={fakeHandleClick} mouseEvent="mousedown">
+					Hello World
+				</ClickAwayListener>
+				<button>A button</button>
+				<p>A text element</p>
+			</React.Fragment>
+		);
+
 		fireEvent.mouseDown(getByText(/A button/i));
 		fireEvent.mouseDown(getByText(/A text element/i));
 		fireEvent.mouseDown(getByText(/Hello World/i));
 		expect(fakeHandleClick).toBeCalledTimes(2);
 	});
 
+	it('works with different touch events', () => {
+		const fakeHandleClick = jest.fn();
+		const { getByText } = render(
+			<React.Fragment>
+				<ClickAwayListener onClickAway={fakeHandleClick} touchEvent="touchend">
+					Hello World
+				</ClickAwayListener>
+				<button>A button</button>
+				<p>A text element</p>
+			</React.Fragment>
+		);
+
+		fireEvent.touchEnd(getByText(/A button/i));
+		fireEvent.touchEnd(getByText(/A text element/i));
+		fireEvent.touchEnd(getByText(/Hello World/i));
+		expect(fakeHandleClick).toBeCalledTimes(2);
+	});
+
 	it('should handle multiple cases', () => {
 		const fakeHandleClick = jest.fn();
 		const fakeHandleClick2 = jest.fn();
 		const { getByTestId } = render(
 			<React.Fragment>
 				<ClickAwayListener onClickAway={fakeHandleClick}>
-					<div data-testid="hello-world">
-						Hello World
-					</div>
+					<div data-testid="hello-world">Hello World</div>
 				</ClickAwayListener>
 				<button data-testid="button-one">A button</button>
 				<button data-testid="some-other-button-one">Some other button</button>
 				<p data-testid="text-one">A text element</p>
 
 				<ClickAwayListener onClickAway={fakeHandleClick2}>
-					<div data-testid="foo-bar">
-						Foo bar
-					</div>
+					<div data-testid="foo-bar">Foo bar</div>
 				</ClickAwayListener>
 				<button data-testid="button-two">Foo bar button</button>
-				<button data-testid="some-other-button-two">Foo bar other button</button>
+				<button data-testid="some-other-button-two">
+					Foo bar other button
+				</button>
 				<p data-testid="text-two">Foo bar text element</p>
 			</React.Fragment>
 		);
 
-		fireEvent.mouseDown(getByTestId('button-one'));
-		fireEvent.mouseDown(getByTestId('text-one'));
-		fireEvent.mouseDown(getByTestId('hello-world'));
-		fireEvent.mouseDown(getByTestId('some-other-button-one'));
+		fireEvent.click(getByTestId('button-one'));
+		fireEvent.click(getByTestId('text-one'));
+		fireEvent.click(getByTestId('hello-world'));
+		fireEvent.click(getByTestId('some-other-button-one'));
 		expect(fakeHandleClick).toBeCalledTimes(3);
 
 		// 4 from the previous ones, and the 3 new ones
-		fireEvent.mouseDown(getByTestId('button-two'));
-		fireEvent.mouseDown(getByTestId('text-two'));
-		fireEvent.mouseDown(getByTestId('foo-bar'));
-		fireEvent.mouseDown(getByTestId('some-other-button-two'));
+		fireEvent.click(getByTestId('button-two'));
+		fireEvent.click(getByTestId('text-two'));
+		fireEvent.click(getByTestId('foo-bar'));
+		fireEvent.click(getByTestId('some-other-button-two'));
 		expect(fakeHandleClick2).toBeCalledTimes(7);
 	});
 });

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-click-away-listener",
-	"version": "0.4.3",
+	"version": "1.0.0",
 	"description": "A simple click away listener built with React Hooks",
 	"main": "dist/react-click-away-listener.js",
 	"module": "dist/react-click-away-listener.es.js",

src/index.tsx

@@ -1,34 +1,41 @@
 import React, { useEffect, useRef, FunctionComponent } from 'react';
 
+type MouseEvents = 'click' | 'mousedown' | 'mouseup';
+type TouchEvents = 'touchstart' | 'touchend';
+
 interface Props {
 	onClickAway: Function;
+	mouseEvent?: MouseEvents;
+	touchEvent?: TouchEvents;
 }
 
-const ClickAwayListener: FunctionComponent<Props> = ({ onClickAway, children }) => {
-
+const ClickAwayListener: FunctionComponent<Props> = ({
+	onClickAway,
+	mouseEvent = 'click',
+	touchEvent = 'touchend',
+	children
+}) => {
 	let node = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
-		const handleMouseDown = (event: MouseEvent): void => {
+		const handleEvents = (event: MouseEvent | TouchEvent): void => {
 			if (node.current && node.current.contains(event.target as Node)) {
 				return;
 			}
 
 			onClickAway();
-		}
+		};
 
-		document.addEventListener('mousedown', handleMouseDown);
+		document.addEventListener(mouseEvent, handleEvents);
+		document.addEventListener(touchEvent, handleEvents);
 
 		return () => {
-			document.removeEventListener('mousedown', handleMouseDown);
+			document.removeEventListener(mouseEvent, handleEvents);
+			document.removeEventListener(touchEvent, handleEvents);
 		};
 	});
 
-	return (
-		<div ref={node}>
-			{children}
-		</div>
-	);
+	return <div ref={node}>{children}</div>;
 };
 
 export default ClickAwayListener;