Better types

Author: ooade

__tests__/index.tsx

@@ -33,15 +33,19 @@ describe('ClickAway Listener', () => {
 		const fakeHandleClick2 = jest.fn();
 		const { getByTestId } = render(
 			<React.Fragment>
-				<ClickAwayListener onClickAway={fakeHandleClick} data-testid="hello-world">
-					Hello World
+				<ClickAwayListener onClickAway={fakeHandleClick}>
+					<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} data-testid="foo-bar">
-					Foo bar
+				<ClickAwayListener onClickAway={fakeHandleClick2}>
+					<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>

src/index.tsx

@@ -1,23 +1,16 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, FunctionComponent } from 'react';
 
 interface Props {
-	children?: React.ReactNode;
 	onClickAway: Function;
-	childrenProps?: { [key: string]: any }[];
 }
 
-const ClickAwayListener = (props: Props) => {
-	const {
-		children,
-		onClickAway,
-		...childrenProps
-	} = props;
+const ClickAwayListener: FunctionComponent<Props> = ({ onClickAway, children }) => {
 
 	let node = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
-		const handleMouseDown = (event:any) => {
-			if (node.current && node.current.contains(event.target)) {
+		const handleMouseDown = (event: MouseEvent): void => {
+			if (node.current && node.current.contains(event.target as Node)) {
 				return;
 			}
 
@@ -32,7 +25,7 @@ const ClickAwayListener = (props: Props) => {
 	});
 
 	return (
-		<div ref={node} {...childrenProps}>
+		<div ref={node}>
 			{children}
 		</div>
 	);