doc: add table to show props and proptypes of listener

ooade · Oct 1, 2020 · a99498d · a99498d
1 parent b5551f5
commit a99498d
Showing 1 changed file with 8 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -44,93 +44,14 @@ const App = () => {
 };
 ```
 
-### Specify React listener element type
-
-```jsx
-import ClickAwayListener from 'react-click-away-listener';
-
-const App = () => {
-	const handleClickAway = () => {
-		console.log('Hey, you can close the Popup now');
-	};
-
-	return (
-		<div id="app">
-			<ClickAwayListener onClickAway={handleClickAway} as="button">
-				<div> Some Popup, Nav or anything </div>
-			</ClickAwayListener>
-			<div id="rest-of-the-app">Don't name a div like that :(</div>
-		</div>
-	);
-};
-```
-
-### Pass props to the listener
-
-```jsx
-import ClickAwayListener from 'react-click-away-listener';
-
-const App = () => {
-	const handleClickAway = () => {
-		console.log('Hey, you can close the Popup now');
-	};
-
-	return (
-		<div id="app">
-			<ClickAwayListener
-				onClickAway={handleClickAway}
-				style={{ padding: '10px', margin: '10px' }}
-				id="click_away_listener"
-			>
-				<div> Some Popup, Nav or anything </div>
-			</ClickAwayListener>
-			<div id="rest-of-the-app">Don't name a div like that :(</div>
-		</div>
-	);
-};
-```
-
-### Pass mouse event type to listener
-
-```jsx
-import ClickAwayListener from 'react-click-away-listener';
-
-const App = () => {
-	const handleClickAway = () => {
-		console.log('Hey, you can close the Popup now');
-	};
-
-	return (
-		<div id="app">
-			<ClickAwayListener onClickAway={handleClickAway} mouseEvent="mousedown">
-				<div> Some Popup, Nav or anything </div>
-			</ClickAwayListener>
-			<div id="rest-of-the-app">Don't name a div like that :(</div>
-		</div>
-	);
-};
-```
-
-### Pass touch event type to listener
-
-```jsx
-import ClickAwayListener from 'react-click-away-listener';
-
-const App = () => {
-	const handleClickAway = () => {
-		console.log('Hey, you can close the Popup now');
-	};
-
-	return (
-		<div id="app">
-			<ClickAwayListener onClickAway={handleClickAway} touchEvent="touchend">
-				<div> Some Popup, Nav or anything </div>
-			</ClickAwayListener>
-			<div id="rest-of-the-app">Don't name a div like that :(</div>
-		</div>
-	);
-};
-```
+## Props and propsType
+
+| Props       | PropsTypes                    | Description                                   |
+| ----------- | ----------------------------- | --------------------------------------------- |
+| onClickAway | (event) => void               | fires when listener is clicked away           |
+| as          | React.ElementType             | element type to render as listener e.g button |
+| mouseEvent  | 'click' 'mousedown' 'mouseup' | mouse event that fires onClickAway            |
+| touchEvent  | 'touchstart' 'touchend'       | touch event that fires onClickAway            |
 
 ## Examples