diff --git a/README.md b/README.md
index 241d432db..3098a1096 100644
--- a/README.md
+++ b/README.md
@@ -40,75 +40,94 @@ import ReactDOM from 'react-dom';
## Table of Contents
-
-### Array
+### Array
View contents
-* [DataList](#datalist)
-* [DataTable](#datatable)
-* [MappedTable](#mappedtable)
+* [`DataList`](#datalist)
+* [`DataTable`](#datatable)
+* [`MappedTable`](#mappedtable)
+
-
-### Input
+### Hooks
View contents
-* [Input](#input)
-* [LimitedTextarea](#limitedtextarea)
-* [LimitedWordTextarea](#limitedwordtextarea)
-* [MultiselectCheckbox](#multiselectcheckbox)
-* [PasswordRevealer](#passwordrevealer)
-* [Select](#select)
-* [Slider](#slider)
-* [TextArea](#textarea)
+* [`ClickInside and ClickOutside`](#clickinside-and-clickoutside)
+
-
-### Object
+### Input
View contents
-* [TreeView](#treeview)
+* [`LimitedTextarea`](#limitedtextarea)
+* [`LimitedWordTextarea`](#limitedwordtextarea)
+* [`MultiselectCheckbox`](#multiselectcheckbox)
+* [`PasswordRevealer`](#passwordrevealer)
+* [`Select`](#select)
+* [`Slider`](#slider)
+* [`TextArea`](#textarea)
+* [`UncontrolledInput`](#uncontrolledinput)
+
-
-### String
+### Object
View contents
-* [AutoLink](#autolink)
+* [`TreeView`](#treeview-)
+
-
-### Visual
+### String
View contents
-* [Accordion](#accordion)
-* [Carousel](#carousel)
-* [Collapse](#collapse)
-* [CountDown](#countdown)
-* [FileDrop](#filedrop)
-* [Mailto](#mailto)
-* [Modal](#modal)
-* [StarRating](#starrating)
-* [Tabs](#tabs)
-* [Ticker](#ticker)
-* [Toggle](#toggle)
-* [Tooltip](#tooltip)
+* [`AutoLink`](#autolink-)
+
+
+
+### Visual
+
+
+View contents
+
+* [`Accordion`](#accordion-)
+* [`Carousel`](#carousel)
+* [`Collapse`](#collapse)
+* [`CountDown`](#countdown-)
+* [`FileDrop`](#filedrop)
+* [`Modal`](#modal)
+* [`StarRating`](#starrating)
+* [`Tabs`](#tabs)
+* [`Ticker`](#ticker)
+* [`Toggle`](#toggle)
+* [`Tooltip`](#tooltip)
+
+
+
+### Viual
+
+
+View contents
+
+* [`Mailto`](#mailto)
+
---
-## Array
+## Array
+
+
### DataList
Renders a list of elements from an array of primitives.
@@ -134,7 +153,7 @@ ReactDOM.render(, document.getElementById('ro
```
- [⬆ Back to top](#table-of-contents)
+ [⬆ Back to top](#contents)
### DataTable
@@ -175,7 +194,7 @@ ReactDOM.render(, document.getElementById('root'));
```
- [⬆ Back to top](#table-of-contents)
+ [⬆ Back to top](#contents)
### MappedTable
@@ -186,6 +205,8 @@ Renders a table with rows dynamically created from an array of objects and a lis
* Use `Array.prototype.map` to render each value in the `propertyNames` array as a `
` element.
* Use `Array.prototype.map` to render each object in the `filteredData` array as a `
` element, containing a `
` for each key in the object.
+*This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`*
+
```jsx
function MappedTable({ data, propertyNames }) {
let filteredData = data.map(v =>
@@ -215,9 +236,6 @@ function MappedTable({ data, propertyNames }) {
);
}
```
-#### Notes
-
-This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`.,,
Examples
@@ -235,27 +253,79 @@ ReactDOM.render(
```
- [⬆ Back to top](#table-of-contents)
+ [⬆ Back to top](#contents)
+
+---
+
+## Hooks
-## Input
-### Input
+### ClickInside and ClickOutside
-Renders an `` element that uses a callback function to pass its value to the parent component.
+Two handy hooks to handle the click outside and inside event on the wrapped component.
-* Use object destructuring to set defaults for certain attributes of the `` element.
-* Render an `` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
+* Create customized hooks that take in a `ref` component(node) and a `callback` function to hanlde the customized `click` event
+* Use the `React.useEffect()` hook to append and clean up the `click` event.
+* Use the `React.useRef()` hook to create a `ref` for your click component and pass it to `useClickInside` and `useClickOutside` hooks.
+
+```css
+.click-box {
+ border: 2px dashed orangered;
+ height: 200px;
+ width: 400px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+p {
+ border: 2px solid blue;
+ padding: 16px;
+}
+```
```jsx
-function Input({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) {
+const useClickInside = (ref, callback) => {
+ const handleClick = e => {
+ //use the node contains to verify if we click inside
+ if (ref.current && ref.current.contains(e.target)) {
+ callback();
+ }
+ };
+
+ //clean up using useEffect
+ useEffect(() => {
+ document.addEventListener("click", handleClick);
+ return () => {
+ document.removeEventListener("click", handleClick);
+ };
+ });
+};
+
+const useClickOutside = (ref, callback) => {
+ const handleClick = e => {
+ //use the node contains to verify if we click outside
+ if (ref.current && !ref.current.contains(e.target)) {
+ callback();
+ }
+ };
+ // clean up using useEffect
+ useEffect(() => {
+ document.addEventListener("click", handleClick);
+ return () => {
+ document.removeEventListener("click", handleClick);
+ };
+ });
+};
+
+function ClickBox({onClickOutside,onClickInside}) {
+ const clickRef = useRef();
+ useClickOutside(clickRef, onClickOutside);
+ useClickInside(clickRef, onClickInside);
return (
- callback(value)}
- />
+
\n ]}\n />,\n document.getElementById('root')\n);\n```"
- ],
- "expertise": 2,
- "tags": [
- "visual",
- "children",
- "state",
- "effect"
- ],
- "notes": []
- },
- {
- "name": "Collapse.md",
- "title": "Collapse",
- "text": "Renders a component with collapsible content.\n\n* Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.\n* Use an object, `style`, to hold the styles for individual components and their states.\n* Use a `
` to wrap both the `
\n );\n}\n```",
- "```jsx\nReactDOM.render(\n \n
This is a collapse
\n
Hello world!
\n ,\n document.getElementById('root')\n);\n```"
- ],
- "expertise": 2,
- "tags": [
- "visual",
- "children",
- "state"
- ],
- "notes": []
- },
- {
- "name": "CountDown.md",
- "title": "CountDown",
- "text": "Renders a countdown timer that prints a message when it reaches zero.\n\n* Use object destructuring to set defaults for the `hours`, `minutes` and `seconds` props.\n* Use the `React.useState()` hook to create the `time`, `paused` and `over` state variables and set their values to the values of the passed props, `false` and `false` respectively.\n* Create a method `tick`, that updates the value of `time` based on the current value (i.e. decreasing the time by one second).\n* If `paused` or `over` is `true`, `tick` will return immediately.\n* Create a method `reset`, that resets all state variables to their initial states.\n* Use the the `React.useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to cleanup when the component is unmounted.\n* Use a `
` to wrap a `
` element with the textual representation of the components `time` state variable, as well as two `