diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json
index 7e3e87c26..c851b0268 100644
--- a/snippet_data/snippetList.json
+++ b/snippet_data/snippetList.json
@@ -14,7 +14,7 @@
         ]
       },
       "meta": {
-        "hash": "0300c924ea29110f2982ae5564a63ff01519a5d0ffc8ae6dc8d175363fb77534"
+        "hash": "89ae8ea6da71231d9ca377f2dff7aa45295d91957756097d3dfa904328055f75"
       }
     },
     {
@@ -32,7 +32,7 @@
         ]
       },
       "meta": {
-        "hash": "8a4373d9d191111ec6644ca315399c78d48c4d1a8c29124e48a88741ef826bea"
+        "hash": "922aeac82b3a5a51e05d84e1795a84eab79106d8052edb857a7cd7db6bf41917"
       }
     },
     {
@@ -50,7 +50,7 @@
         ]
       },
       "meta": {
-        "hash": "24c0b339ea3131a8bde8081b1f44caac1d5014ecc1ac6d25ebf4b14d053a83a8"
+        "hash": "0810223a6248d03b4adb32586b919c28979fe06bbff209fe8e18d890532a094a"
       }
     },
     {
@@ -67,7 +67,7 @@
         ]
       },
       "meta": {
-        "hash": "bb14a75971ab3a395e7a7e4458f636b9309f3e9a376494fe10b716be256bd9d2"
+        "hash": "d6efbb46da30a701cc691ad94b860fb6f0b34459e88caa8d744411734503af8f"
       }
     },
     {
@@ -84,7 +84,7 @@
         ]
       },
       "meta": {
-        "hash": "a9c8332455bad3c81dd1dbaf7361b98406ed11eaa35e9be8e72e88d8139eb2d6"
+        "hash": "25ac64175964945e36212d776ef5192d54628e1d08561489a022765c45368692"
       }
     },
     {
@@ -100,7 +100,7 @@
         ]
       },
       "meta": {
-        "hash": "b5ac7580e6a96df21478030c6c2b30fa2e56df2573ab66e2405bdbbdce60aa61"
+        "hash": "fb5aeef0abd03d44daaff0bd027c7633fe4b079f07c13f2cb3166a56363453ef"
       }
     },
     {
@@ -115,7 +115,7 @@
         ]
       },
       "meta": {
-        "hash": "38eb402c926fbc919a04b55fe8d6fb2fbdd5ba54341783852f909f9181e745da"
+        "hash": "9c5d1b4aee999583a6f01ef38b0060a2eedcb27e215246e0cf31a5e43e53c0f5"
       }
     },
     {
@@ -130,7 +130,7 @@
         ]
       },
       "meta": {
-        "hash": "c4aba21d546f519469e8a65101e9cd44b25dae028b48a223b8cb6c19f83b60d4"
+        "hash": "1ad27574cfe29f8cce5410e7dd243d66edeea801037e3cd0ed1d24ecdbd5526e"
       }
     },
     {
@@ -149,7 +149,7 @@
         ]
       },
       "meta": {
-        "hash": "2e35dd3fa6b4808f03aff6b542b293f8be0fd9aa1cbb7bd85a2729f808cf8888"
+        "hash": "083b5e03f65112796bebc1fb5b8db99c7cd7ff16a11cca192ad18ea5db5c7e30"
       }
     },
     {
@@ -167,7 +167,7 @@
         ]
       },
       "meta": {
-        "hash": "eabc464d70da892c84d00925de7c8c22ea3f54d5337e7b2efd6e4043fb447aa8"
+        "hash": "b4b4fbf568331843e4734aa58831dd0c94afc5aeb7d987c8afcf9e9b24f0aeea"
       }
     },
     {
@@ -185,7 +185,7 @@
         ]
       },
       "meta": {
-        "hash": "8c0f35b8cba144ddf8611fa48659ef9a83bd235a961466ccbf1ca5f43bd6b602"
+        "hash": "daebbd819d3a73beb3a82ba3c9682b619fc1f663edaad8c60fab3e1b4b44c30c"
       }
     },
     {
@@ -200,7 +200,7 @@
         ]
       },
       "meta": {
-        "hash": "e22d307cb43e589e7bd1ec5caab16c1101aa764102f35cd7295876033b44578e"
+        "hash": "e59782e34529471198a8ec1f471368e5128743ab0d50ca1dfae488dd38ae9378"
       }
     },
     {
@@ -216,7 +216,7 @@
         ]
       },
       "meta": {
-        "hash": "9ff4e1580f53ab64c740aee2bfdc85f1cfc46f7cf2f39d6324ec4c2b7d6c7270"
+        "hash": "fce03ceb446e80f63f4b1423c70dc854f4dbf38bb54a68302c2e09d9a2c8d402"
       }
     },
     {
@@ -232,7 +232,7 @@
         ]
       },
       "meta": {
-        "hash": "07c392eff204d3fe475cba116d25ca84b48f7f37ae18f0adade7e65c98ec509d"
+        "hash": "bbe8b37ec2d9ee322d89b28d0ac290efd7f5b1e501cad63bbf0674cbea9e2abc"
       }
     },
     {
@@ -249,7 +249,7 @@
         ]
       },
       "meta": {
-        "hash": "ec2d246e3520208cf67146e9674f576b4d13fd31854892113396409edcb68db6"
+        "hash": "723cc4aeb42bc0234045688334e01ec89b66782a54862d2b2236ae12e1f87881"
       }
     },
     {
@@ -265,7 +265,7 @@
         ]
       },
       "meta": {
-        "hash": "7e019374ec668fe2bc3053bbcb3e8a2f3ac419ac0e316d3ee6e94f99a1fb53ee"
+        "hash": "b9d1d5a6b61d2ab8e73943da1dcf86bfa872821c9584715a2cee303a052334ea"
       }
     },
     {
@@ -280,7 +280,7 @@
         ]
       },
       "meta": {
-        "hash": "b82ad131475042bd38682aba03964494680fc2dfe3a61b0a1478215f74e993de"
+        "hash": "82ec17f203f168e42206f2a56a5954e01fd639599f26cc1c8bafb77fb5b5fb5b"
       }
     },
     {
@@ -295,7 +295,7 @@
         ]
       },
       "meta": {
-        "hash": "db77adcc300072c41b4d096cd385f7c3616601fcace16d7c28032036a6eed7e7"
+        "hash": "bf2bc45d4c4781f54cee33599c17b35bd4ce6a90e70dd5305401e2b4bafa21bf"
       }
     },
     {
@@ -313,7 +313,7 @@
         ]
       },
       "meta": {
-        "hash": "a057b14315a578a5c27d6534b965c8a567be6ffd7ba0b32882282e6e99076ebc"
+        "hash": "1925a397f77ea80ee9dc9d82acee6dc279a3e82abac815b32109ce930de20a1f"
       }
     },
     {
@@ -330,7 +330,7 @@
         ]
       },
       "meta": {
-        "hash": "54a00cb6ac87079622e3806aa55816332e353eb88ba263a5059dd40942955ff7"
+        "hash": "9f8634ca4a5f49134cb88e00c0f193c6c6c5cf8ee60482a16782c04f48595176"
       }
     },
     {
@@ -345,7 +345,7 @@
         ]
       },
       "meta": {
-        "hash": "4c0c3bcdb3a7a7f858d1e938e7a1926804ceca983f5eeae3edf4b28f36548fb4"
+        "hash": "a6ed5da811b5f42c139e0d0d868a0b49881203467ffcb464b707a0d9bbe7660f"
       }
     },
     {
@@ -361,7 +361,7 @@
         ]
       },
       "meta": {
-        "hash": "d64dece795561241f3b0d7b3fa1e87971994bda2fbe406c6ce740af866e3d9a7"
+        "hash": "eb29bbedf8f0aed903abf2b12ce90b5d02a8b3fdae15b4c8810b5841aeca9e4b"
       }
     },
     {
@@ -377,7 +377,7 @@
         ]
       },
       "meta": {
-        "hash": "c921c0adeca337f2cf804acf35e8ab231befdd451d4dcca09a73fecf6ad66836"
+        "hash": "9a7a1630d12ccf86f0712a7ca7444698933f3f3d946957ef1b6202637c44d531"
       }
     },
     {
@@ -394,7 +394,7 @@
         ]
       },
       "meta": {
-        "hash": "db3b0f49f674b5a64ee1b9a9098aab360331901425faa382c5de5cb8cae33167"
+        "hash": "1d29be55adf50919e115f5fa83d7446bd11688f4d3a50c19bf357675cd7fdfd4"
       }
     },
     {
@@ -412,7 +412,7 @@
         ]
       },
       "meta": {
-        "hash": "305bd408515e5c575411f40b1bb24f75f6c776cd6387bb083818f2feb9175a70"
+        "hash": "63922e84d527dc7783025495ebab1df55452b595d0a5e54981d8ea891e055736"
       }
     },
     {
@@ -427,7 +427,7 @@
         ]
       },
       "meta": {
-        "hash": "5aff6673123594949dd0d1e72c8fbb586f402b2eb9fdcf8dd9a2b789b4089adb"
+        "hash": "11581e3b40209c7152833aa421c7d18c889b16067c5cc1557b1bb7f604f18982"
       }
     },
     {
@@ -444,7 +444,7 @@
         ]
       },
       "meta": {
-        "hash": "f2e5c4b9e8c44a5fb9a1f8002cfbeb2d6090cfe97d4d15dcc575ce89611bb599"
+        "hash": "1be6623c673a30671e534ac363e5acffdedc8d890fad5f73a7cafc7c7402bb75"
       }
     },
     {
@@ -461,7 +461,7 @@
         ]
       },
       "meta": {
-        "hash": "e8f3e64cd0cf616dd42843328234e37b1b7a77ed51da8956204fdb02e088ce33"
+        "hash": "e565a610582386df7a41cbcfcd2d2ad7df11651adceafdd9e4840ca2b756af21"
       }
     },
     {
@@ -478,7 +478,7 @@
         ]
       },
       "meta": {
-        "hash": "848cb6ba4f8bd5dad012a38e6bd0e7c829a79b3215a23939c30a3f652627da4f"
+        "hash": "2b621b216e6f8225c435deff5ca567628e97c5a39bb20f5b19c92f521a8a8f0c"
       }
     },
     {
@@ -494,7 +494,7 @@
         ]
       },
       "meta": {
-        "hash": "04b22b339da3652cd044203a1d9723af542afe13572a38da825bd093ab1c99af"
+        "hash": "2a5dbbdb2da60c42a738211e43997f45fe416f4cb069fbb53b1369549f446319"
       }
     },
     {
@@ -510,7 +510,7 @@
         ]
       },
       "meta": {
-        "hash": "507c6fc6be62127e00738e39c6b22686a100b8af7252e1bbe589480b126c3d79"
+        "hash": "c07ecd818ad2e330d5bf4010da4464ac1aa76f1dcafec4cb7d9a8168313b68e9"
       }
     }
   ],
diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json
index 63c3d89ab..c4bc2f8fc 100644
--- a/snippet_data/snippets.json
+++ b/snippet_data/snippets.json
@@ -9,8 +9,8 @@
         "text": "Renders an accordion menu with multiple collapsible content components.\n\n- Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`.\n- Each `AccordionItem` component renders a `<button>` that is used to update the `Accordion` via the `props.handleClick` callback and the content of the component, passed down via `props.children`, while its appearance is determined by `props.isCollapsed` and based on `style`.\n- In the `Accordion` component, use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.\n- Use `Array.prototype.map` on the collected nodes to render the individual collapsiple elements.\n- Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.\n  `changeItem` executes the passed callback, `onItemClick` and updates `bindIndex` based on the clicked element.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function AccordionItem(props) {\r\n  const style = {\r\n    collapsed: {\r\n      display: 'none'\r\n    },\r\n    expanded: {\r\n      display: 'block'\r\n    },\r\n    buttonStyle: {\r\n      display: 'block',\r\n      width: '100%'\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <button style={style.buttonStyle} onClick={() => props.handleClick()}>\r\n        {props.label}\r\n      </button>\r\n      <div\r\n        className=\"collapse-content\"\r\n        style={props.isCollapsed ? style.collapsed : style.expanded}\r\n        aria-expanded={props.isCollapsed}\r\n      >\r\n        {props.children}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction Accordion(props) {\r\n  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);\r\n\r\n  const changeItem = itemIndex => {\r\n    if (typeof props.onItemClick === 'function') props.onItemClick(itemIndex);\r\n    if (itemIndex !== bindIndex) setBindIndex(itemIndex);\r\n  };\r\n  const items = props.children.filter(item => item.type.name === 'AccordionItem');\r\n\r\n  return (\r\n    <div className=\"wrapper\">\r\n      {items.map(({ props }) => (\r\n        <AccordionItem\r\n          isCollapsed={bindIndex === props.index}\r\n          label={props.label}\r\n          handleClick={() => changeItem(props.index)}\r\n          children={props.children}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <Accordion defaultIndex=\"1\" onItemClick={console.log}>\r\n    <AccordionItem label=\"A\" index=\"1\">\r\n      Lorem ipsum\r\n    </AccordionItem>\r\n    <AccordionItem label=\"B\" index=\"2\">\r\n      Dolor sit amet\r\n    </AccordionItem>\r\n  </Accordion>,\r\n  document.getElementById('root')\r\n);"
+          "code": "function AccordionItem(props) {\n  const style = {\n    collapsed: {\n      display: 'none'\n    },\n    expanded: {\n      display: 'block'\n    },\n    buttonStyle: {\n      display: 'block',\n      width: '100%'\n    }\n  };\n\n  return (\n    <div>\n      <button style={style.buttonStyle} onClick={() => props.handleClick()}>\n        {props.label}\n      </button>\n      <div\n        className=\"collapse-content\"\n        style={props.isCollapsed ? style.collapsed : style.expanded}\n        aria-expanded={props.isCollapsed}\n      >\n        {props.children}\n      </div>\n    </div>\n  );\n}\n\nfunction Accordion(props) {\n  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);\n\n  const changeItem = itemIndex => {\n    if (typeof props.onItemClick === 'function') props.onItemClick(itemIndex);\n    if (itemIndex !== bindIndex) setBindIndex(itemIndex);\n  };\n  const items = props.children.filter(item => item.type.name === 'AccordionItem');\n\n  return (\n    <div className=\"wrapper\">\n      {items.map(({ props }) => (\n        <AccordionItem\n          isCollapsed={bindIndex === props.index}\n          label={props.label}\n          handleClick={() => changeItem(props.index)}\n          children={props.children}\n        />\n      ))}\n    </div>\n  );\n}",
+          "example": "ReactDOM.render(\n  <Accordion defaultIndex=\"1\" onItemClick={console.log}>\n    <AccordionItem label=\"A\" index=\"1\">\n      Lorem ipsum\n    </AccordionItem>\n    <AccordionItem label=\"B\" index=\"2\">\n      Dolor sit amet\n    </AccordionItem>\n  </Accordion>,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "visual",
@@ -20,7 +20,7 @@
         ]
       },
       "meta": {
-        "hash": "0300c924ea29110f2982ae5564a63ff01519a5d0ffc8ae6dc8d175363fb77534"
+        "hash": "89ae8ea6da71231d9ca377f2dff7aa45295d91957756097d3dfa904328055f75"
       }
     },
     {
@@ -32,8 +32,8 @@
         "text": "Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.\n\n- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function AutoLink({ text }) {\r\n  const delimiter = /((?:https?:\\/\\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\\-]{1,61}[a-z0-9])?\\.[^\\.|\\s])+[a-z\\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\\d{1,5})*[a-z0-9.,_\\/~#&=;%+?\\-\\\\(\\\\)]*)/gi;\r\n\r\n  return (\r\n    <React.Fragment>\r\n      {text.split(delimiter).map(word => {\r\n        let match = word.match(delimiter);\r\n        if (match) {\r\n          let url = match[0];\r\n          return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;\r\n        }\r\n        return word;\r\n      })}\r\n    </React.Fragment>\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <AutoLink text=\"foo bar baz http://example.org bar\" />,\r\n  document.getElementById('root')\r\n);"
+          "code": "function AutoLink({ text }) {\n  const delimiter = /((?:https?:\\/\\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\\-]{1,61}[a-z0-9])?\\.[^\\.|\\s])+[a-z\\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\\d{1,5})*[a-z0-9.,_\\/~#&=;%+?\\-\\\\(\\\\)]*)/gi;\n\n  return (\n    <React.Fragment>\n      {text.split(delimiter).map(word => {\n        let match = word.match(delimiter);\n        if (match) {\n          let url = match[0];\n          return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;\n        }\n        return word;\n      })}\n    </React.Fragment>\n  );\n}",
+          "example": "ReactDOM.render(\n  <AutoLink text=\"foo bar baz http://example.org bar\" />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "visual",
@@ -44,7 +44,7 @@
         ]
       },
       "meta": {
-        "hash": "8a4373d9d191111ec6644ca315399c78d48c4d1a8c29124e48a88741ef826bea"
+        "hash": "922aeac82b3a5a51e05d84e1795a84eab79106d8052edb857a7cd7db6bf41917"
       }
     },
     {
@@ -56,8 +56,8 @@
         "text": "Renders a carousel component.\n\n- Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\n- Use an object, `style`, to hold the styles for the individual components.\n- Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\n- Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\n- Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function Carousel(props) {\r\n  const [active, setActive] = React.useState(0);\r\n  let scrollInterval = null;\r\n  const style = {\r\n    carousel: {\r\n      position: 'relative'\r\n    },\r\n    carouselItem: {\r\n      position: 'absolute',\r\n      visibility: 'hidden'\r\n    },\r\n    visible: {\r\n      visibility: 'visible'\r\n    }\r\n  };\r\n  React.useEffect(() => {\r\n    scrollInterval = setTimeout(() => {\r\n      const { carouselItems } = props;\r\n      setActive((active + 1) % carouselItems.length);\r\n    }, 2000);\r\n  });\r\n  const { carouselItems, ...rest } = props;\r\n  return (\r\n    <div style={style.carousel}>\r\n      {carouselItems.map((item, index) => {\r\n        const activeStyle = active === index ? style.visible : {};\r\n        return React.cloneElement(item, {\r\n          ...rest,\r\n          style: {\r\n            ...style.carouselItem,\r\n            ...activeStyle\r\n          }\r\n        });\r\n      })}\r\n    </div>\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <Carousel\r\n    carouselItems={[\r\n      <div>carousel item 1</div>,\r\n      <div>carousel item 2</div>,\r\n      <div>carousel item 3</div>\r\n    ]}\r\n  />,\r\n  document.getElementById('root')\r\n);"
+          "code": "function Carousel(props) {\n  const [active, setActive] = React.useState(0);\n  let scrollInterval = null;\n  const style = {\n    carousel: {\n      position: 'relative'\n    },\n    carouselItem: {\n      position: 'absolute',\n      visibility: 'hidden'\n    },\n    visible: {\n      visibility: 'visible'\n    }\n  };\n  React.useEffect(() => {\n    scrollInterval = setTimeout(() => {\n      const { carouselItems } = props;\n      setActive((active + 1) % carouselItems.length);\n    }, 2000);\n  });\n  const { carouselItems, ...rest } = props;\n  return (\n    <div style={style.carousel}>\n      {carouselItems.map((item, index) => {\n        const activeStyle = active === index ? style.visible : {};\n        return React.cloneElement(item, {\n          ...rest,\n          style: {\n            ...style.carouselItem,\n            ...activeStyle\n          }\n        });\n      })}\n    </div>\n  );\n}",
+          "example": "ReactDOM.render(\n  <Carousel\n    carouselItems={[\n      <div>carousel item 1</div>,\n      <div>carousel item 2</div>,\n      <div>carousel item 3</div>\n    ]}\n  />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "visual",
@@ -68,7 +68,7 @@
         ]
       },
       "meta": {
-        "hash": "24c0b339ea3131a8bde8081b1f44caac1d5014ecc1ac6d25ebf4b14d053a83a8"
+        "hash": "0810223a6248d03b4adb32586b919c28979fe06bbff209fe8e18d890532a094a"
       }
     },
     {
@@ -80,8 +80,8 @@
         "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 `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.\n- Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.\n- Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function Collapse(props) {\r\n  const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);\r\n\r\n  const style = {\r\n    collapsed: {\r\n      display: 'none'\r\n    },\r\n    expanded: {\r\n      display: 'block'\r\n    },\r\n    buttonStyle: {\r\n      display: 'block',\r\n      width: '100%'\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <button style={style.buttonStyle} onClick={() => setIsCollapsed(!isCollapsed)}>\r\n        {isCollapsed ? 'Show' : 'Hide'} content\r\n      </button>\r\n      <div\r\n        className=\"collapse-content\"\r\n        style={isCollapsed ? style.collapsed : style.expanded}\r\n        aria-expanded={isCollapsed}\r\n      >\r\n        {props.children}\r\n      </div>\r\n    </div>\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <Collapse>\r\n    <h1>This is a collapse</h1>\r\n    <p>Hello world!</p>\r\n  </Collapse>,\r\n  document.getElementById('root')\r\n);"
+          "code": "function Collapse(props) {\n  const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);\n\n  const style = {\n    collapsed: {\n      display: 'none'\n    },\n    expanded: {\n      display: 'block'\n    },\n    buttonStyle: {\n      display: 'block',\n      width: '100%'\n    }\n  };\n\n  return (\n    <div>\n      <button style={style.buttonStyle} onClick={() => setIsCollapsed(!isCollapsed)}>\n        {isCollapsed ? 'Show' : 'Hide'} content\n      </button>\n      <div\n        className=\"collapse-content\"\n        style={isCollapsed ? style.collapsed : style.expanded}\n        aria-expanded={isCollapsed}\n      >\n        {props.children}\n      </div>\n    </div>\n  );\n}",
+          "example": "ReactDOM.render(\n  <Collapse>\n    <h1>This is a collapse</h1>\n    <p>Hello world!</p>\n  </Collapse>,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "visual",
@@ -91,7 +91,7 @@
         ]
       },
       "meta": {
-        "hash": "bb14a75971ab3a395e7a7e4458f636b9309f3e9a376494fe10b716be256bd9d2"
+        "hash": "d6efbb46da30a701cc691ad94b860fb6f0b34459e88caa8d744411734503af8f"
       }
     },
     {
@@ -103,8 +103,8 @@
         "text": "Renders an `<input>` element with internal state, that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<input>` element.\n- Use the `React.setState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop.\n- Use the `React.useEffect()` hook with a second parameter set to the `value` state variable to call the `callback` function every time `value` is updated.\n- Render an `<input>` element with the appropriate attributes and use the the `onChange` event to upda the `value` state variable.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function ControlledInput({\r\n  callback,\r\n  type = 'text',\r\n  disabled = false,\r\n  readOnly = false,\r\n  defaultValue,\r\n  placeholder = ''\r\n}) {\r\n  const [value, setValue] = React.useState(defaultValue);\r\n\r\n  React.useEffect(() => {\r\n    callback(value);\r\n  }, [value]);\r\n\r\n  return (\r\n    <input\r\n      defaultValue={defaultValue}\r\n      type={type}\r\n      disabled={disabled}\r\n      readOnly={readOnly}\r\n      placeholder={placeholder}\r\n      onChange={({ target: { value } }) => setValue(value)}\r\n    />\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <ControlledInput\r\n    type=\"text\"\r\n    placeholder=\"Insert some text here...\"\r\n    callback={val => console.log(val)}\r\n  />,\r\n  document.getElementById('root')\r\n);"
+          "code": "function ControlledInput({\n  callback,\n  type = 'text',\n  disabled = false,\n  readOnly = false,\n  defaultValue,\n  placeholder = ''\n}) {\n  const [value, setValue] = React.useState(defaultValue);\n\n  React.useEffect(() => {\n    callback(value);\n  }, [value]);\n\n  return (\n    <input\n      defaultValue={defaultValue}\n      type={type}\n      disabled={disabled}\n      readOnly={readOnly}\n      placeholder={placeholder}\n      onChange={({ target: { value } }) => setValue(value)}\n    />\n  );\n}",
+          "example": "ReactDOM.render(\n  <ControlledInput\n    type=\"text\"\n    placeholder=\"Insert some text here...\"\n    callback={val => console.log(val)}\n  />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "input",
@@ -114,7 +114,7 @@
         ]
       },
       "meta": {
-        "hash": "a9c8332455bad3c81dd1dbaf7361b98406ed11eaa35e9be8e72e88d8139eb2d6"
+        "hash": "25ac64175964945e36212d776ef5192d54628e1d08561489a022765c45368692"
       }
     },
     {
@@ -126,7 +126,7 @@
         "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 `<div>` to wrap a `<p>` element with the textual representation of the components `time` state variable, as well as two `<button>` elements that will pause/unpause and restart the timer respectively.\n- If `over` is `true`, the timer will display a message instead of the value of `time`.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {\r\n  const [paused, setPaused] = React.useState(false);\r\n  const [over, setOver] = React.useState(false);\r\n  const [time, setTime] = React.useState({\r\n    hours: parseInt(hours),\r\n    minutes: parseInt(minutes),\r\n    seconds: parseInt(seconds)\r\n  });\r\n\r\n  const tick = () => {\r\n    if (paused || over) return;\r\n    if (time.hours == 0 && time.minutes == 0 && time.seconds == 0) setOver(true);\r\n    else if (time.minutes == 0 && time.seconds == 0)\r\n      setTime({\r\n        hours: time.hours - 1,\r\n        minutes: 59,\r\n        seconds: 59\r\n      });\r\n    else if (time.seconds == 0)\r\n      setTime({\r\n        hours: time.hours,\r\n        minutes: time.minutes - 1,\r\n        seconds: 59\r\n      });\r\n    else\r\n      setTime({\r\n        hours: time.hours,\r\n        minutes: time.minutes,\r\n        seconds: time.seconds - 1\r\n      });\r\n  };\r\n\r\n  const reset = () => {\r\n    setTime({\r\n      hours: parseInt(hours),\r\n      minutes: parseInt(minutes),\r\n      seconds: parseInt(seconds)\r\n    });\r\n    setPaused(false);\r\n    setOver(false);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    let timerID = setInterval(() => tick(), 1000);\r\n    return () => clearInterval(timerID);\r\n  });\r\n\r\n  return (\r\n    <div>\r\n      <p>{`${time.hours.toString().padStart(2, '0')}:${time.minutes\r\n        .toString()\r\n        .padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}`}</p>\r\n      <div>{over ? \"Time's up!\" : ''}</div>\r\n      <button onClick={() => setPaused(!paused)}>{paused ? 'Resume' : 'Pause'}</button>\r\n      <button onClick={() => reset()}>Restart</button>\r\n    </div>\r\n  );\r\n}",
+          "code": "function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {\n  const [paused, setPaused] = React.useState(false);\n  const [over, setOver] = React.useState(false);\n  const [time, setTime] = React.useState({\n    hours: parseInt(hours),\n    minutes: parseInt(minutes),\n    seconds: parseInt(seconds)\n  });\n\n  const tick = () => {\n    if (paused || over) return;\n    if (time.hours == 0 && time.minutes == 0 && time.seconds == 0) setOver(true);\n    else if (time.minutes == 0 && time.seconds == 0)\n      setTime({\n        hours: time.hours - 1,\n        minutes: 59,\n        seconds: 59\n      });\n    else if (time.seconds == 0)\n      setTime({\n        hours: time.hours,\n        minutes: time.minutes - 1,\n        seconds: 59\n      });\n    else\n      setTime({\n        hours: time.hours,\n        minutes: time.minutes,\n        seconds: time.seconds - 1\n      });\n  };\n\n  const reset = () => {\n    setTime({\n      hours: parseInt(hours),\n      minutes: parseInt(minutes),\n      seconds: parseInt(seconds)\n    });\n    setPaused(false);\n    setOver(false);\n  };\n\n  React.useEffect(() => {\n    let timerID = setInterval(() => tick(), 1000);\n    return () => clearInterval(timerID);\n  });\n\n  return (\n    <div>\n      <p>{`${time.hours.toString().padStart(2, '0')}:${time.minutes\n        .toString()\n        .padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}`}</p>\n      <div>{over ? \"Time's up!\" : ''}</div>\n      <button onClick={() => setPaused(!paused)}>{paused ? 'Resume' : 'Pause'}</button>\n      <button onClick={() => reset()}>Restart</button>\n    </div>\n  );\n}",
           "example": "ReactDOM.render(<CountDown hours=\"1\" minutes=\"45\" />, document.getElementById('root'));"
         },
         "tags": [
@@ -136,7 +136,7 @@
         ]
       },
       "meta": {
-        "hash": "b5ac7580e6a96df21478030c6c2b30fa2e56df2573ab66e2405bdbbdce60aa61"
+        "hash": "fb5aeef0abd03d44daaff0bd027c7633fe4b079f07c13f2cb3166a56363453ef"
       }
     },
     {
@@ -148,8 +148,8 @@
         "text": "Renders a list of elements from an array of primitives.\n\n- Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.\n- Use `Array.prototype.map` to render every item in `data` as a `<li>` element, give it a `key` produced from the concatenation of the its index and value.\n- Omit the `isOrdered` prop to render a `<ul>` list by default.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function DataList({ isOrdered, data }) {\r\n  const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);\r\n  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;\r\n}",
-          "example": "const names = ['John', 'Paul', 'Mary'];\r\nReactDOM.render(<DataList data={names} />, document.getElementById('root'));\r\nReactDOM.render(<DataList data={names} isOrdered />, document.getElementById('root'));"
+          "code": "function DataList({ isOrdered, data }) {\n  const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);\n  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;\n}",
+          "example": "const names = ['John', 'Paul', 'Mary'];\nReactDOM.render(<DataList data={names} />, document.getElementById('root'));\nReactDOM.render(<DataList data={names} isOrdered />, document.getElementById('root'));"
         },
         "tags": [
           "array",
@@ -157,7 +157,7 @@
         ]
       },
       "meta": {
-        "hash": "38eb402c926fbc919a04b55fe8d6fb2fbdd5ba54341783852f909f9181e745da"
+        "hash": "9c5d1b4aee999583a6f01ef38b0060a2eedcb27e215246e0cf31a5e43e53c0f5"
       }
     },
     {
@@ -169,8 +169,8 @@
         "text": "Renders a table with rows dynamically created from an array of primitives.\n\n- Render a `<table>` element with two columns (`ID` and `Value`).\n- Use `Array.prototype.map` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function DataTable({ data }) {\r\n  return (\r\n    <table>\r\n      <thead>\r\n        <tr>\r\n          <th>ID</th>\r\n          <th>Value</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        {data.map((val, i) => (\r\n          <tr key={`${i}_${val}`}>\r\n            <td>{i}</td>\r\n            <td>{val}</td>\r\n          </tr>\r\n        ))}\r\n      </tbody>\r\n    </table>\r\n  );\r\n}",
-          "example": "const people = ['John', 'Jesse'];\r\nReactDOM.render(<DataTable data={people} />, document.getElementById('root'));"
+          "code": "function DataTable({ data }) {\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>ID</th>\n          <th>Value</th>\n        </tr>\n      </thead>\n      <tbody>\n        {data.map((val, i) => (\n          <tr key={`${i}_${val}`}>\n            <td>{i}</td>\n            <td>{val}</td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}",
+          "example": "const people = ['John', 'Jesse'];\nReactDOM.render(<DataTable data={people} />, document.getElementById('root'));"
         },
         "tags": [
           "array",
@@ -178,7 +178,7 @@
         ]
       },
       "meta": {
-        "hash": "c4aba21d546f519469e8a65101e9cd44b25dae028b48a223b8cb6c19f83b60d4"
+        "hash": "1ad27574cfe29f8cce5410e7dd243d66edeea801037e3cd0ed1d24ecdbd5526e"
       }
     },
     {
@@ -189,8 +189,8 @@
         "fileName": "FileDrop.md",
         "text": "Renders a file drag and drop component for a single file.\n\n- Create a ref called `dropRef` for this component.\n- Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.\n  The variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.\n- Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.\n- Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.\n- `handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.\n- Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.\n- Finally, bind the `ref` of the created `<div>` to `dropRef`.\n\n",
         "codeBlocks": {
-          "style": ".filedrop {\r\n  min-height: 120px;\r\n  border: 3px solid #d3d3d3;\r\n  text-align: center;\r\n  font-size: 24px;\r\n  padding: 32px;\r\n  border-radius: 4px;\r\n}\r\n\r\n.filedrop.drag {\r\n  border: 3px dashed #1e90ff;\r\n}\r\n\r\n.filedrop.ready {\r\n  border: 3px solid #32cd32;\r\n}",
-          "code": "function FileDrop(props) {\r\n  const [drag, setDrag] = React.useState(false);\r\n  const [filename, setFilename] = React.useState('');\r\n  let dropRef = React.createRef();\r\n  let dragCounter = 0;\r\n\r\n  const handleDrag = e => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n  };\r\n\r\n  const handleDragIn = e => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n    dragCounter++;\r\n    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);\r\n  };\r\n\r\n  const handleDragOut = e => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n    dragCounter--;\r\n    if (dragCounter === 0) setDrag(false);\r\n  };\r\n\r\n  const handleDrop = e => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n    setDrag(false);\r\n    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\r\n      props.handleDrop(e.dataTransfer.files[0]);\r\n      setFilename(e.dataTransfer.files[0].name);\r\n      e.dataTransfer.clearData();\r\n      dragCounter = 0;\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    let div = dropRef.current;\r\n    div.addEventListener('dragenter', handleDragIn);\r\n    div.addEventListener('dragleave', handleDragOut);\r\n    div.addEventListener('dragover', handleDrag);\r\n    div.addEventListener('drop', handleDrop);\r\n    return function cleanup() {\r\n      div.removeEventListener('dragenter', handleDragIn);\r\n      div.removeEventListener('dragleave', handleDragOut);\r\n      div.removeEventListener('dragover', handleDrag);\r\n      div.removeEventListener('drop', handleDrop);\r\n    };\r\n  });\r\n\r\n  return (\r\n    <div\r\n      ref={dropRef}\r\n      className={drag ? 'filedrop drag' : filename ? 'filedrop ready' : 'filedrop'}\r\n    >\r\n      {filename && !drag ? <div>{filename}</div> : <div>Drop files here!</div>}\r\n    </div>\r\n  );\r\n}",
+          "style": ".filedrop {\n  min-height: 120px;\n  border: 3px solid #d3d3d3;\n  text-align: center;\n  font-size: 24px;\n  padding: 32px;\n  border-radius: 4px;\n}\n\n.filedrop.drag {\n  border: 3px dashed #1e90ff;\n}\n\n.filedrop.ready {\n  border: 3px solid #32cd32;\n}",
+          "code": "function FileDrop(props) {\n  const [drag, setDrag] = React.useState(false);\n  const [filename, setFilename] = React.useState('');\n  let dropRef = React.createRef();\n  let dragCounter = 0;\n\n  const handleDrag = e => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const handleDragIn = e => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounter++;\n    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);\n  };\n\n  const handleDragOut = e => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounter--;\n    if (dragCounter === 0) setDrag(false);\n  };\n\n  const handleDrop = e => {\n    e.preventDefault();\n    e.stopPropagation();\n    setDrag(false);\n    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n      props.handleDrop(e.dataTransfer.files[0]);\n      setFilename(e.dataTransfer.files[0].name);\n      e.dataTransfer.clearData();\n      dragCounter = 0;\n    }\n  };\n\n  React.useEffect(() => {\n    let div = dropRef.current;\n    div.addEventListener('dragenter', handleDragIn);\n    div.addEventListener('dragleave', handleDragOut);\n    div.addEventListener('dragover', handleDrag);\n    div.addEventListener('drop', handleDrop);\n    return function cleanup() {\n      div.removeEventListener('dragenter', handleDragIn);\n      div.removeEventListener('dragleave', handleDragOut);\n      div.removeEventListener('dragover', handleDrag);\n      div.removeEventListener('drop', handleDrop);\n    };\n  });\n\n  return (\n    <div\n      ref={dropRef}\n      className={drag ? 'filedrop drag' : filename ? 'filedrop ready' : 'filedrop'}\n    >\n      {filename && !drag ? <div>{filename}</div> : <div>Drop files here!</div>}\n    </div>\n  );\n}",
           "example": "ReactDOM.render(<FileDrop handleDrop={console.log} />, document.getElementById('root'));"
         },
         "tags": [
@@ -203,7 +203,7 @@
         ]
       },
       "meta": {
-        "hash": "2e35dd3fa6b4808f03aff6b542b293f8be0fd9aa1cbb7bd85a2729f808cf8888"
+        "hash": "083b5e03f65112796bebc1fb5b8db99c7cd7ff16a11cca192ad18ea5db5c7e30"
       }
     },
     {
@@ -215,7 +215,7 @@
         "text": "Renders a textarea component with a character limit.\n\n- Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.\n  Create a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.\n- Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\n- Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function LimitedTextarea({ rows, cols, value, limit }) {\r\n  const [content, setContent] = React.useState(value);\r\n\r\n  const setFormattedContent = text => {\r\n    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setFormattedContent(content);\r\n  }, []);\r\n\r\n  return (\r\n    <div>\r\n      <textarea\r\n        rows={rows}\r\n        cols={cols}\r\n        onChange={event => setFormattedContent(event.target.value)}\r\n        value={content}\r\n      />\r\n      <p>\r\n        {content.length}/{limit}\r\n      </p>\r\n    </div>\r\n  );\r\n}",
+          "code": "function LimitedTextarea({ rows, cols, value, limit }) {\n  const [content, setContent] = React.useState(value);\n\n  const setFormattedContent = text => {\n    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);\n  };\n\n  React.useEffect(() => {\n    setFormattedContent(content);\n  }, []);\n\n  return (\n    <div>\n      <textarea\n        rows={rows}\n        cols={cols}\n        onChange={event => setFormattedContent(event.target.value)}\n        value={content}\n      />\n      <p>\n        {content.length}/{limit}\n      </p>\n    </div>\n  );\n}",
           "example": "ReactDOM.render(<LimitedTextarea limit={32} value=\"Hello!\" />, document.getElementById('root'));"
         },
         "tags": [
@@ -227,7 +227,7 @@
         ]
       },
       "meta": {
-        "hash": "eabc464d70da892c84d00925de7c8c22ea3f54d5337e7b2efd6e4043fb447aa8"
+        "hash": "b4b4fbf568331843e4734aa58831dd0c94afc5aeb7d987c8afcf9e9b24f0aeea"
       }
     },
     {
@@ -239,8 +239,8 @@
         "text": "Renders a textarea component with a word limit.\n\n- Use the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.\n- Create a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.\n- If the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.\n- Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\n- Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function LimitedWordTextarea({ rows, cols, value, limit }) {\r\n  const [content, setContent] = React.useState(value);\r\n  const [wordCount, setWordCount] = React.useState(0);\r\n\r\n  const setFormattedContent = text => {\r\n    let words = text.split(' ');\r\n    if (words.filter(Boolean).length > limit) {\r\n      setContent(\r\n        text\r\n          .split(' ')\r\n          .slice(0, limit)\r\n          .join(' ')\r\n      );\r\n      setWordCount(limit);\r\n    } else {\r\n      setContent(text);\r\n      setWordCount(words.filter(Boolean).length);\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setFormattedContent(content);\r\n  }, []);\r\n\r\n  return (\r\n    <div>\r\n      <textarea\r\n        rows={rows}\r\n        cols={cols}\r\n        onChange={event => setFormattedContent(event.target.value)}\r\n        value={content}\r\n      />\r\n      <p>\r\n        {wordCount}/{limit}\r\n      </p>\r\n    </div>\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <LimitedWordTextArea limit={5} value=\"Hello there!\" />,\r\n  document.getElementById('root')\r\n);"
+          "code": "function LimitedWordTextarea({ rows, cols, value, limit }) {\n  const [content, setContent] = React.useState(value);\n  const [wordCount, setWordCount] = React.useState(0);\n\n  const setFormattedContent = text => {\n    let words = text.split(' ');\n    if (words.filter(Boolean).length > limit) {\n      setContent(\n        text\n          .split(' ')\n          .slice(0, limit)\n          .join(' ')\n      );\n      setWordCount(limit);\n    } else {\n      setContent(text);\n      setWordCount(words.filter(Boolean).length);\n    }\n  };\n\n  React.useEffect(() => {\n    setFormattedContent(content);\n  }, []);\n\n  return (\n    <div>\n      <textarea\n        rows={rows}\n        cols={cols}\n        onChange={event => setFormattedContent(event.target.value)}\n        value={content}\n      />\n      <p>\n        {wordCount}/{limit}\n      </p>\n    </div>\n  );\n}",
+          "example": "ReactDOM.render(\n  <LimitedWordTextArea limit={5} value=\"Hello there!\" />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "input",
@@ -251,7 +251,7 @@
         ]
       },
       "meta": {
-        "hash": "8c0f35b8cba144ddf8611fa48659ef9a83bd235a961466ccbf1ca5f43bd6b602"
+        "hash": "daebbd819d3a73beb3a82ba3c9682b619fc1f663edaad8c60fab3e1b4b44c30c"
       }
     },
     {
@@ -263,8 +263,8 @@
         "text": "Renders a link formatted to send an email.\n\n- Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.\n- Render the link with `props.children` as its content.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function Mailto({ email, subject, body, ...props }) {\r\n  return (\r\n    <a href={`mailto:${email}?subject=${subject || ''}&body=${body || ''}`}>{props.children}</a>\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <Mailto email=\"foo@bar.baz\" subject=\"Hello\" body=\"Hello world!\">\r\n    Mail me!\r\n  </Mailto>,\r\n  document.getElementById('root')\r\n);"
+          "code": "function Mailto({ email, subject, body, ...props }) {\n  return (\n    <a href={`mailto:${email}?subject=${subject || ''}&body=${body || ''}`}>{props.children}</a>\n  );\n}",
+          "example": "ReactDOM.render(\n  <Mailto email=\"foo@bar.baz\" subject=\"Hello\" body=\"Hello world!\">\n    Mail me!\n  </Mailto>,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "visual",
@@ -272,7 +272,7 @@
         ]
       },
       "meta": {
-        "hash": "e22d307cb43e589e7bd1ec5caab16c1101aa764102f35cd7295876033b44578e"
+        "hash": "e59782e34529471198a8ec1f471368e5128743ab0d50ca1dfae488dd38ae9378"
       }
     },
     {
@@ -284,8 +284,8 @@
         "text": "Renders a table with rows dynamically created from an array of objects and a list of property names.\n\n- Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.\n- Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.\n- Use `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.\n- Use `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.\n\n_This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`_\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function MappedTable({ data, propertyNames }) {\r\n  let filteredData = data.map(v =>\r\n    Object.keys(v)\r\n      .filter(k => propertyNames.includes(k))\r\n      .reduce((acc, key) => ((acc[key] = v[key]), acc), {})\r\n  );\r\n  return (\r\n    <table>\r\n      <thead>\r\n        <tr>\r\n          {propertyNames.map(val => (\r\n            <th key={`h_${val}`}>{val}</th>\r\n          ))}\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        {filteredData.map((val, i) => (\r\n          <tr key={`i_${i}`}>\r\n            {propertyNames.map(p => (\r\n              <td key={`i_${i}_${p}`}>{val[p]}</td>\r\n            ))}\r\n          </tr>\r\n        ))}\r\n      </tbody>\r\n    </table>\r\n  );\r\n}",
-          "example": "const people = [\r\n  { name: 'John', surname: 'Smith', age: 42 },\r\n  { name: 'Adam', surname: 'Smith', gender: 'male' }\r\n];\r\nconst propertyNames = ['name', 'surname', 'age'];\r\nReactDOM.render(\r\n  <MappedTable data={people} propertyNames={propertyNames} />,\r\n  document.getElementById('root')\r\n);"
+          "code": "function MappedTable({ data, propertyNames }) {\n  let filteredData = data.map(v =>\n    Object.keys(v)\n      .filter(k => propertyNames.includes(k))\n      .reduce((acc, key) => ((acc[key] = v[key]), acc), {})\n  );\n  return (\n    <table>\n      <thead>\n        <tr>\n          {propertyNames.map(val => (\n            <th key={`h_${val}`}>{val}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {filteredData.map((val, i) => (\n          <tr key={`i_${i}`}>\n            {propertyNames.map(p => (\n              <td key={`i_${i}_${p}`}>{val[p]}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}",
+          "example": "const people = [\n  { name: 'John', surname: 'Smith', age: 42 },\n  { name: 'Adam', surname: 'Smith', gender: 'male' }\n];\nconst propertyNames = ['name', 'surname', 'age'];\nReactDOM.render(\n  <MappedTable data={people} propertyNames={propertyNames} />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "array",
@@ -294,7 +294,7 @@
         ]
       },
       "meta": {
-        "hash": "9ff4e1580f53ab64c740aee2bfdc85f1cfc46f7cf2f39d6324ec4c2b7d6c7270"
+        "hash": "fce03ceb446e80f63f4b1423c70dc854f4dbf38bb54a68302c2e09d9a2c8d402"
       }
     },
     {
@@ -305,9 +305,9 @@
         "fileName": "Modal.md",
         "text": "Renders a Modal component, controllable through events.\nTo use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute.\n\n- Use object destructuring to set defaults for certain attributes of the modal component.\n- Define `keydownHandler`, a method which handles all keyboard events, which can be used according to your needs to dispatch actions (e.g. close the modal when <kbd>Esc</kbd> is pressed).\n- Use `React.useEffect()` hook to add or remove the `keydown` event listener, which calls `keydownHandler`.\n- Use the `isVisible` prop to determine if the modal should be shown or not.\n- Use CSS to style and position the modal component.\n\n",
         "codeBlocks": {
-          "style": ".modal {\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  width: 100%;\r\n  z-index: 9999;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background-color: rgba(0, 0, 0, 0.25);\r\n  animation-name: appear;\r\n  animation-duration: 300ms;\r\n}\r\n\r\n.modal-dialog {\r\n  width: 100%;\r\n  max-width: 550px;\r\n  background: white;\r\n  position: relative;\r\n  margin: 0 20px;\r\n  max-height: calc(100vh - 40px);\r\n  text-align: left;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\r\n  -webkit-animation-name: animatetop;\r\n  -webkit-animation-duration: 0.4s;\r\n  animation-name: slide-in;\r\n  animation-duration: 0.5s;\r\n}\r\n\r\n.modal-header,\r\n.modal-footer {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 1rem;\r\n}\r\n.modal-header {\r\n  border-bottom: 1px solid #dbdbdb;\r\n  justify-content: space-between;\r\n}\r\n.modal-footer {\r\n  border-top: 1px solid #dbdbdb;\r\n  justify-content: flex-end;\r\n}\r\n.modal-close {\r\n  cursor: pointer;\r\n  padding: 1rem;\r\n  margin: -1rem -1rem -1rem auto;\r\n}\r\n.modal-body {\r\n  overflow: auto;\r\n}\r\n.modal-content {\r\n  padding: 1rem;\r\n}\r\n\r\n@keyframes appear {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n@keyframes slide-in {\r\n  from {\r\n    transform: translateY(-150px);\r\n  }\r\n  to {\r\n    transform: translateY(0);\r\n  }\r\n}",
-          "code": "function Modal({ isVisible = false, title, content, footer, onClose }) {\r\n  React.useEffect(() => {\r\n    document.addEventListener('keydown', keydownHandler);\r\n    return () => document.removeEventListener('keydown', keydownHandler);\r\n  });\r\n\r\n  function keydownHandler({ key }) {\r\n    switch (key) {\r\n      case 'Escape':\r\n        onClose();\r\n        break;\r\n      default:\r\n    }\r\n  }\r\n\r\n  return !isVisible ? null : (\r\n    <div className=\"modal\" onClick={onClose}>\r\n      <div className=\"modal-dialog\" onClick={e => e.stopPropagation()}>\r\n        <div className=\"modal-header\">\r\n          <h3 className=\"modal-title\">{title}</h3>\r\n          <span className=\"modal-close\" onClick={onClose}>\r\n            &times;\r\n          </span>\r\n        </div>\r\n        <div className=\"modal-body\">\r\n          <div className=\"modal-content\">{content}</div>\r\n        </div>\r\n        {footer && <div className=\"modal-footer\">{footer}</div>}\r\n      </div>\r\n    </div>\r\n  );\r\n}",
-          "example": "//Add the component to the render function\r\nfunction App() {\r\n  const [isModal, setModal] = React.useState(false);\r\n\r\n  return (\r\n    <React.Fragment>\r\n      <button onClick={() => setModal(true)}>Click Here</button>\r\n      <Modal\r\n        isVisible={isModal}\r\n        title=\"Modal Title\"\r\n        content={<p>Add your content here</p>}\r\n        footer={<button>Cancel</button>}\r\n        onClose={() => setModal(false)}\r\n      />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nReactDOM.render(<App />, document.getElementById('root'));"
+          "style": ".modal {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(0, 0, 0, 0.25);\n  animation-name: appear;\n  animation-duration: 300ms;\n}\n\n.modal-dialog {\n  width: 100%;\n  max-width: 550px;\n  background: white;\n  position: relative;\n  margin: 0 20px;\n  max-height: calc(100vh - 40px);\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  -webkit-animation-name: animatetop;\n  -webkit-animation-duration: 0.4s;\n  animation-name: slide-in;\n  animation-duration: 0.5s;\n}\n\n.modal-header,\n.modal-footer {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n}\n.modal-header {\n  border-bottom: 1px solid #dbdbdb;\n  justify-content: space-between;\n}\n.modal-footer {\n  border-top: 1px solid #dbdbdb;\n  justify-content: flex-end;\n}\n.modal-close {\n  cursor: pointer;\n  padding: 1rem;\n  margin: -1rem -1rem -1rem auto;\n}\n.modal-body {\n  overflow: auto;\n}\n.modal-content {\n  padding: 1rem;\n}\n\n@keyframes appear {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes slide-in {\n  from {\n    transform: translateY(-150px);\n  }\n  to {\n    transform: translateY(0);\n  }\n}",
+          "code": "function Modal({ isVisible = false, title, content, footer, onClose }) {\n  React.useEffect(() => {\n    document.addEventListener('keydown', keydownHandler);\n    return () => document.removeEventListener('keydown', keydownHandler);\n  });\n\n  function keydownHandler({ key }) {\n    switch (key) {\n      case 'Escape':\n        onClose();\n        break;\n      default:\n    }\n  }\n\n  return !isVisible ? null : (\n    <div className=\"modal\" onClick={onClose}>\n      <div className=\"modal-dialog\" onClick={e => e.stopPropagation()}>\n        <div className=\"modal-header\">\n          <h3 className=\"modal-title\">{title}</h3>\n          <span className=\"modal-close\" onClick={onClose}>\n            &times;\n          </span>\n        </div>\n        <div className=\"modal-body\">\n          <div className=\"modal-content\">{content}</div>\n        </div>\n        {footer && <div className=\"modal-footer\">{footer}</div>}\n      </div>\n    </div>\n  );\n}",
+          "example": "//Add the component to the render function\nfunction App() {\n  const [isModal, setModal] = React.useState(false);\n\n  return (\n    <React.Fragment>\n      <button onClick={() => setModal(true)}>Click Here</button>\n      <Modal\n        isVisible={isModal}\n        title=\"Modal Title\"\n        content={<p>Add your content here</p>}\n        footer={<button>Cancel</button>}\n        onClose={() => setModal(false)}\n      />\n    </React.Fragment>\n  );\n}\n\nReactDOM.render(<App />, document.getElementById('root'));"
         },
         "tags": [
           "visual",
@@ -316,7 +316,7 @@
         ]
       },
       "meta": {
-        "hash": "07c392eff204d3fe475cba116d25ca84b48f7f37ae18f0adade7e65c98ec509d"
+        "hash": "bbe8b37ec2d9ee322d89b28d0ac290efd7f5b1e501cad63bbf0674cbea9e2abc"
       }
     },
     {
@@ -328,8 +328,8 @@
         "text": "Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.\n\n- Use `React.setState()` to create a `data` state variable and set its initial value equal to the `options` prop.\n- Create a function `toggle` that is used to toggle the `checked` to update the `data` state variable and call the `onChange` callback passed via the component's props.\n- Render a `<ul>` element and use `Array.prototype.map()` to map the `data` state variable to individual `<li>` elements with `<input>` elements as their children.\n- Each `<input>` element has the `type='checkbox'` attribute and is marked as `readOnly`, as its click events are handled by the parent `<li>` element's `onClick` handler.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "const style = {\r\n  listContainer: {\r\n    listStyle: 'none',\r\n    paddingLeft: 0\r\n  },\r\n  itemStyle: {\r\n    cursor: 'pointer',\r\n    padding: 5\r\n  }\r\n};\r\n\r\nfunction MultiselectCheckbox({ options, onChange }) {\r\n  const [data, setData] = React.useState(options);\r\n\r\n  const toggle = item => {\r\n    data.forEach((_, key) => {\r\n      if (data[key].label === item.label) data[key].checked = !item.checked;\r\n    });\r\n    setData([...data]);\r\n    onChange(data);\r\n  };\r\n\r\n  return (\r\n    <ul style={style.listContainer}>\r\n      {data.map(item => {\r\n        return (\r\n          <li key={item.label} style={style.itemStyle} onClick={() => toggle(item)}>\r\n            <input readOnly type=\"checkbox\" checked={item.checked || false} />\r\n            {item.label}\r\n          </li>\r\n        );\r\n      })}\r\n    </ul>\r\n  );\r\n}",
-          "example": "const options = [{ label: 'Item One' }, { label: 'Item Two' }];\r\n\r\nReactDOM.render(\r\n  <MultiselectCheckbox\r\n    options={options}\r\n    onChange={data => {\r\n      console.log(data);\r\n    }}\r\n  />,\r\n  document.getElementById('root')\r\n);"
+          "code": "const style = {\n  listContainer: {\n    listStyle: 'none',\n    paddingLeft: 0\n  },\n  itemStyle: {\n    cursor: 'pointer',\n    padding: 5\n  }\n};\n\nfunction MultiselectCheckbox({ options, onChange }) {\n  const [data, setData] = React.useState(options);\n\n  const toggle = item => {\n    data.forEach((_, key) => {\n      if (data[key].label === item.label) data[key].checked = !item.checked;\n    });\n    setData([...data]);\n    onChange(data);\n  };\n\n  return (\n    <ul style={style.listContainer}>\n      {data.map(item => {\n        return (\n          <li key={item.label} style={style.itemStyle} onClick={() => toggle(item)}>\n            <input readOnly type=\"checkbox\" checked={item.checked || false} />\n            {item.label}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}",
+          "example": "const options = [{ label: 'Item One' }, { label: 'Item Two' }];\n\nReactDOM.render(\n  <MultiselectCheckbox\n    options={options}\n    onChange={data => {\n      console.log(data);\n    }}\n  />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "input",
@@ -339,7 +339,7 @@
         ]
       },
       "meta": {
-        "hash": "ec2d246e3520208cf67146e9674f576b4d13fd31854892113396409edcb68db6"
+        "hash": "723cc4aeb42bc0234045688334e01ec89b66782a54862d2b2236ae12e1f87881"
       }
     },
     {
@@ -351,7 +351,7 @@
         "text": "Renders a password input field with a reveal button.\n\n- Use the `React.useState()` hook to create the `shown` state variable and set its value to `false`.\n- Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `\"text\"` and `\"password\"`.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function PasswordRevealer({ value }) {\r\n  const [shown, setShown] = React.useState(false);\r\n\r\n  return (\r\n    <div>\r\n      <input type={shown ? 'text' : 'password'} value={value} onChange={() => {}} />\r\n      <button onClick={() => setShown(!shown)}>Show/Hide</button>\r\n    </div>\r\n  );\r\n}",
+          "code": "function PasswordRevealer({ value }) {\n  const [shown, setShown] = React.useState(false);\n\n  return (\n    <div>\n      <input type={shown ? 'text' : 'password'} value={value} onChange={() => {}} />\n      <button onClick={() => setShown(!shown)}>Show/Hide</button>\n    </div>\n  );\n}",
           "example": "ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));"
         },
         "tags": [
@@ -361,7 +361,7 @@
         ]
       },
       "meta": {
-        "hash": "7e019374ec668fe2bc3053bbcb3e8a2f3ac419ac0e316d3ee6e94f99a1fb53ee"
+        "hash": "b9d1d5a6b61d2ab8e73943da1dcf86bfa872821c9584715a2cee303a052334ea"
       }
     },
     {
@@ -373,8 +373,8 @@
         "text": "Renders a `<select>` element that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<select>` element.\n- Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.\n- Use destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the `<select>` element.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function Select({ values, callback, disabled = false, readonly = false, selected }) {\r\n  return (\r\n    <select\r\n      disabled={disabled}\r\n      readOnly={readonly}\r\n      onChange={({ target: { value } }) => callback(value)}\r\n    >\r\n      {values.map(([value, text]) => (\r\n        <option selected={selected === value} value={value}>\r\n          {text}\r\n        </option>\r\n      ))}\r\n    </select>\r\n  );\r\n}",
-          "example": "let choices = [\r\n  ['grapefruit', 'Grapefruit'],\r\n  ['lime', 'Lime'],\r\n  ['coconut', 'Coconut'],\r\n  ['mango', 'Mango']\r\n];\r\nReactDOM.render(\r\n  <Select values={choices} selected=\"lime\" callback={val => console.log(val)} />,\r\n  document.getElementById('root')\r\n);"
+          "code": "function Select({ values, callback, disabled = false, readonly = false, selected }) {\n  return (\n    <select\n      disabled={disabled}\n      readOnly={readonly}\n      onChange={({ target: { value } }) => callback(value)}\n    >\n      {values.map(([value, text]) => (\n        <option selected={selected === value} value={value}>\n          {text}\n        </option>\n      ))}\n    </select>\n  );\n}",
+          "example": "let choices = [\n  ['grapefruit', 'Grapefruit'],\n  ['lime', 'Lime'],\n  ['coconut', 'Coconut'],\n  ['mango', 'Mango']\n];\nReactDOM.render(\n  <Select values={choices} selected=\"lime\" callback={val => console.log(val)} />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "input",
@@ -382,7 +382,7 @@
         ]
       },
       "meta": {
-        "hash": "b82ad131475042bd38682aba03964494680fc2dfe3a61b0a1478215f74e993de"
+        "hash": "82ec17f203f168e42206f2a56a5954e01fd639599f26cc1c8bafb77fb5b5fb5b"
       }
     },
     {
@@ -394,7 +394,7 @@
         "text": "Renders a slider element that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<input>` element.\n- Render an `<input>` element of type `\"range\"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function Slider({ callback, disabled = false, readOnly = false }) {\r\n  return (\r\n    <input\r\n      type=\"range\"\r\n      disabled={disabled}\r\n      readOnly={readOnly}\r\n      onChange={({ target: { value } }) => callback(value)}\r\n    />\r\n  );\r\n}",
+          "code": "function Slider({ callback, disabled = false, readOnly = false }) {\n  return (\n    <input\n      type=\"range\"\n      disabled={disabled}\n      readOnly={readOnly}\n      onChange={({ target: { value } }) => callback(value)}\n    />\n  );\n}",
           "example": "ReactDOM.render(<Slider callback={val => console.log(val)} />, document.getElementById('root'));"
         },
         "tags": [
@@ -403,7 +403,7 @@
         ]
       },
       "meta": {
-        "hash": "db77adcc300072c41b4d096cd385f7c3616601fcace16d7c28032036a6eed7e7"
+        "hash": "bf2bc45d4c4781f54cee33599c17b35bd4ce6a90e70dd5305401e2b4bafa21bf"
       }
     },
     {
@@ -415,8 +415,8 @@
         "text": "Renders a star rating component.\n\n- Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.\n- In the `StarRating` component, use the `React.useState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.\n- Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.\n- Create a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.\n- Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function Star({ marked, starId }) {\r\n  return (\r\n    <span star-id={starId} style={{ color: '#ff9933' }} role=\"button\">\r\n      {marked ? '\\u2605' : '\\u2606'}\r\n    </span>\r\n  );\r\n}\r\n\r\nfunction StarRating(props) {\r\n  const [rating, setRating] = React.useState(typeof props.rating == 'number' ? props.rating : 0);\r\n  const [selection, setSelection] = React.useState(0);\r\n  const hoverOver = event => {\r\n    let val = 0;\r\n    if (event && event.target && event.target.getAttribute('star-id'))\r\n      val = event.target.getAttribute('star-id');\r\n    setSelection(val);\r\n  };\r\n  return (\r\n    <div\r\n      onMouseOut={() => hoverOver(null)}\r\n      onClick={event => setRating(event.target.getAttribute('star-id') || rating)}\r\n      onMouseOver={hoverOver}\r\n    >\r\n      {Array.from({ length: 5 }, (v, i) => (\r\n        <Star\r\n          starId={i + 1}\r\n          key={`star_${i + 1} `}\r\n          marked={selection ? selection >= i + 1 : rating >= i + 1}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}",
-          "example": "ReactDOM.render(<StarRating />, document.getElementById('root'));\r\nReactDOM.render(<StarRating rating={2} />, document.getElementById('root'));"
+          "code": "function Star({ marked, starId }) {\n  return (\n    <span star-id={starId} style={{ color: '#ff9933' }} role=\"button\">\n      {marked ? '\\u2605' : '\\u2606'}\n    </span>\n  );\n}\n\nfunction StarRating(props) {\n  const [rating, setRating] = React.useState(typeof props.rating == 'number' ? props.rating : 0);\n  const [selection, setSelection] = React.useState(0);\n  const hoverOver = event => {\n    let val = 0;\n    if (event && event.target && event.target.getAttribute('star-id'))\n      val = event.target.getAttribute('star-id');\n    setSelection(val);\n  };\n  return (\n    <div\n      onMouseOut={() => hoverOver(null)}\n      onClick={event => setRating(event.target.getAttribute('star-id') || rating)}\n      onMouseOver={hoverOver}\n    >\n      {Array.from({ length: 5 }, (v, i) => (\n        <Star\n          starId={i + 1}\n          key={`star_${i + 1} `}\n          marked={selection ? selection >= i + 1 : rating >= i + 1}\n        />\n      ))}\n    </div>\n  );\n}",
+          "example": "ReactDOM.render(<StarRating />, document.getElementById('root'));\nReactDOM.render(<StarRating rating={2} />, document.getElementById('root'));"
         },
         "tags": [
           "visual",
@@ -427,7 +427,7 @@
         ]
       },
       "meta": {
-        "hash": "a057b14315a578a5c27d6534b965c8a567be6ffd7ba0b32882282e6e99076ebc"
+        "hash": "1925a397f77ea80ee9dc9d82acee6dc279a3e82abac815b32109ce930de20a1f"
       }
     },
     {
@@ -438,9 +438,9 @@
         "fileName": "Tabs.md",
         "text": "Renders a tabbed menu and view component.\n\n- Define a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`.\n- Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.\n- Use `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`.\n- Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.\n- `changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.\n\n",
         "codeBlocks": {
-          "style": ".tab-menu > button {\r\n  cursor: pointer;\r\n  padding: 8px 16px;\r\n  border: 0;\r\n  border-bottom: 2px solid transparent;\r\n  background: none;\r\n}\r\n.tab-menu > button.focus {\r\n  border-bottom: 2px solid #007bef;\r\n}\r\n.tab-menu > button:hover {\r\n  border-bottom: 2px solid #007bef;\r\n}",
-          "code": "function TabItem(props) {\r\n  return <div {...props} />;\r\n}\r\n\r\nfunction Tabs(props) {\r\n  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);\r\n  const changeTab = newIndex => {\r\n    if (typeof props.onTabClick === 'function') props.onTabClick(newIndex);\r\n    setBindIndex(newIndex);\r\n  };\r\n  const items = props.children.filter(item => item.type.name === 'TabItem');\r\n\r\n  return (\r\n    <div className=\"wrapper\">\r\n      <div className=\"tab-menu\">\r\n        {items.map(({ props: { index, label } }) => (\r\n          <button onClick={() => changeTab(index)} className={bindIndex === index ? 'focus' : ''}>\r\n            {label}\r\n          </button>\r\n        ))}\r\n      </div>\r\n      <div className=\"tab-view\">\r\n        {items.map(({ props }) => (\r\n          <div\r\n            {...props}\r\n            className=\"tab-view_item\"\r\n            key={props.index}\r\n            style={{ display: bindIndex === props.index ? 'block' : 'none' }}\r\n          />\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <Tabs defaultIndex=\"1\" onTabClick={console.log}>\r\n    <TabItem label=\"A\" index=\"1\">\r\n      Lorem ipsum\r\n    </TabItem>\r\n    <TabItem label=\"B\" index=\"2\">\r\n      Dolor sit amet\r\n    </TabItem>\r\n  </Tabs>,\r\n  document.getElementById('root')\r\n);"
+          "style": ".tab-menu > button {\n  cursor: pointer;\n  padding: 8px 16px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  background: none;\n}\n.tab-menu > button.focus {\n  border-bottom: 2px solid #007bef;\n}\n.tab-menu > button:hover {\n  border-bottom: 2px solid #007bef;\n}",
+          "code": "function TabItem(props) {\n  return <div {...props} />;\n}\n\nfunction Tabs(props) {\n  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);\n  const changeTab = newIndex => {\n    if (typeof props.onTabClick === 'function') props.onTabClick(newIndex);\n    setBindIndex(newIndex);\n  };\n  const items = props.children.filter(item => item.type.name === 'TabItem');\n\n  return (\n    <div className=\"wrapper\">\n      <div className=\"tab-menu\">\n        {items.map(({ props: { index, label } }) => (\n          <button onClick={() => changeTab(index)} className={bindIndex === index ? 'focus' : ''}>\n            {label}\n          </button>\n        ))}\n      </div>\n      <div className=\"tab-view\">\n        {items.map(({ props }) => (\n          <div\n            {...props}\n            className=\"tab-view_item\"\n            key={props.index}\n            style={{ display: bindIndex === props.index ? 'block' : 'none' }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}",
+          "example": "ReactDOM.render(\n  <Tabs defaultIndex=\"1\" onTabClick={console.log}>\n    <TabItem label=\"A\" index=\"1\">\n      Lorem ipsum\n    </TabItem>\n    <TabItem label=\"B\" index=\"2\">\n      Dolor sit amet\n    </TabItem>\n  </Tabs>,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "visual",
@@ -450,7 +450,7 @@
         ]
       },
       "meta": {
-        "hash": "54a00cb6ac87079622e3806aa55816332e353eb88ba263a5059dd40942955ff7"
+        "hash": "9f8634ca4a5f49134cb88e00c0f193c6c6c5cf8ee60482a16782c04f48595176"
       }
     },
     {
@@ -462,8 +462,8 @@
         "text": "Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<textarea>` element.\n- Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function TextArea({\r\n  callback,\r\n  cols = 20,\r\n  rows = 2,\r\n  disabled = false,\r\n  readOnly = false,\r\n  placeholder = ''\r\n}) {\r\n  return (\r\n    <textarea\r\n      cols={cols}\r\n      rows={rows}\r\n      disabled={disabled}\r\n      readOnly={readOnly}\r\n      placeholder={placeholder}\r\n      onChange={({ target: { value } }) => callback(value)}\r\n    />\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <TextArea placeholder=\"Insert some text here...\" callback={val => console.log(val)} />,\r\n  document.getElementById('root')\r\n);"
+          "code": "function TextArea({\n  callback,\n  cols = 20,\n  rows = 2,\n  disabled = false,\n  readOnly = false,\n  placeholder = ''\n}) {\n  return (\n    <textarea\n      cols={cols}\n      rows={rows}\n      disabled={disabled}\n      readOnly={readOnly}\n      placeholder={placeholder}\n      onChange={({ target: { value } }) => callback(value)}\n    />\n  );\n}",
+          "example": "ReactDOM.render(\n  <TextArea placeholder=\"Insert some text here...\" callback={val => console.log(val)} />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "input",
@@ -471,7 +471,7 @@
         ]
       },
       "meta": {
-        "hash": "4c0c3bcdb3a7a7f858d1e938e7a1926804ceca983f5eeae3edf4b28f36548fb4"
+        "hash": "a6ed5da811b5f42c139e0d0d868a0b49881203467ffcb464b707a0d9bbe7660f"
       }
     },
     {
@@ -483,7 +483,7 @@
         "text": "Renders a ticker component.\n\n- Use the `React.useState()` hook to initialize the `ticker` state variable to `0`.\n- Define two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.\n- Return a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function Ticker(props) {\r\n  const [ticker, setTicker] = React.useState(0);\r\n  let interval = null;\r\n\r\n  const tick = () => {\r\n    reset();\r\n    interval = setInterval(() => {\r\n      if (ticker < props.times) setTicker(ticker + 1);\r\n      else clearInterval(interval);\r\n    }, props.interval);\r\n  };\r\n\r\n  const reset = () => {\r\n    setTicker(0);\r\n    clearInterval(interval);\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <span style={{ fontSize: 100 }}>{ticker}</span>\r\n      <button onClick={tick}>Tick!</button>\r\n      <button onClick={reset}>Reset</button>\r\n    </div>\r\n  );\r\n}",
+          "code": "function Ticker(props) {\n  const [ticker, setTicker] = React.useState(0);\n  let interval = null;\n\n  const tick = () => {\n    reset();\n    interval = setInterval(() => {\n      if (ticker < props.times) setTicker(ticker + 1);\n      else clearInterval(interval);\n    }, props.interval);\n  };\n\n  const reset = () => {\n    setTicker(0);\n    clearInterval(interval);\n  };\n\n  return (\n    <div>\n      <span style={{ fontSize: 100 }}>{ticker}</span>\n      <button onClick={tick}>Tick!</button>\n      <button onClick={reset}>Reset</button>\n    </div>\n  );\n}",
           "example": "ReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('root'));"
         },
         "tags": [
@@ -493,7 +493,7 @@
         ]
       },
       "meta": {
-        "hash": "d64dece795561241f3b0d7b3fa1e87971994bda2fbe406c6ce740af866e3d9a7"
+        "hash": "eb29bbedf8f0aed903abf2b12ce90b5d02a8b3fdae15b4c8810b5841aeca9e4b"
       }
     },
     {
@@ -505,7 +505,7 @@
         "text": "Renders a toggle component.\n\n- Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`.\n- Use an object, `style`, to hold the styles for individual components and their states.\n- Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function Toggle(props) {\r\n  const [isToggleOn, setIsToggleOn] = React.useState(false);\r\n  style = {\r\n    on: {\r\n      backgroundColor: 'green'\r\n    },\r\n    off: {\r\n      backgroundColor: 'grey'\r\n    }\r\n  };\r\n\r\n  return (\r\n    <button onClick={() => setIsToggleOn(!isToggleOn)} style={isToggleOn ? style.on : style.off}>\r\n      {isToggleOn ? 'ON' : 'OFF'}\r\n    </button>\r\n  );\r\n}",
+          "code": "function Toggle(props) {\n  const [isToggleOn, setIsToggleOn] = React.useState(false);\n  style = {\n    on: {\n      backgroundColor: 'green'\n    },\n    off: {\n      backgroundColor: 'grey'\n    }\n  };\n\n  return (\n    <button onClick={() => setIsToggleOn(!isToggleOn)} style={isToggleOn ? style.on : style.off}>\n      {isToggleOn ? 'ON' : 'OFF'}\n    </button>\n  );\n}",
           "example": "ReactDOM.render(<Toggle />, document.getElementById('root'));"
         },
         "tags": [
@@ -515,7 +515,7 @@
         ]
       },
       "meta": {
-        "hash": "c921c0adeca337f2cf804acf35e8ab231befdd451d4dcca09a73fecf6ad66836"
+        "hash": "9a7a1630d12ccf86f0712a7ca7444698933f3f3d946957ef1b6202637c44d531"
       }
     },
     {
@@ -526,9 +526,9 @@
         "fileName": "Tooltip.md",
         "text": "Renders a tooltip component.\n\n- Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.\n- Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.\n- Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.\n\n",
         "codeBlocks": {
-          "style": ".tooltip {\r\n  position: relative;\r\n  background: rgba(0, 0, 0, 0.7);\r\n  color: white;\r\n  visibility: hidden;\r\n  padding: 5px;\r\n  border-radius: 5px;\r\n}\r\n.tooltip-arrow {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 50%;\r\n  border-width: 5px;\r\n  border-style: solid;\r\n  border-color: rgba(0, 0, 0, 0.7) transparent transparent;\r\n}",
-          "code": "function Tooltip({ children, text, ...rest }) {\r\n  const [show, setShow] = React.useState(false);\r\n\r\n  return (\r\n    <div>\r\n      <div className=\"tooltip\" style={show ? { visibility: 'visible' } : {}}>\r\n        {text}\r\n        <span className=\"tooltip-arrow\" />\r\n      </div>\r\n      <div {...rest} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <Tooltip text=\"Simple tooltip\">\r\n    <button>Hover me!</button>\r\n  </Tooltip>,\r\n  document.getElementById('root')\r\n);"
+          "style": ".tooltip {\n  position: relative;\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  visibility: hidden;\n  padding: 5px;\n  border-radius: 5px;\n}\n.tooltip-arrow {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  border-width: 5px;\n  border-style: solid;\n  border-color: rgba(0, 0, 0, 0.7) transparent transparent;\n}",
+          "code": "function Tooltip({ children, text, ...rest }) {\n  const [show, setShow] = React.useState(false);\n\n  return (\n    <div>\n      <div className=\"tooltip\" style={show ? { visibility: 'visible' } : {}}>\n        {text}\n        <span className=\"tooltip-arrow\" />\n      </div>\n      <div {...rest} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n        {children}\n      </div>\n    </div>\n  );\n}",
+          "example": "ReactDOM.render(\n  <Tooltip text=\"Simple tooltip\">\n    <button>Hover me!</button>\n  </Tooltip>,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "visual",
@@ -538,7 +538,7 @@
         ]
       },
       "meta": {
-        "hash": "db3b0f49f674b5a64ee1b9a9098aab360331901425faa382c5de5cb8cae33167"
+        "hash": "1d29be55adf50919e115f5fa83d7446bd11688f4d3a50c19bf357675cd7fdfd4"
       }
     },
     {
@@ -549,9 +549,9 @@
         "fileName": "TreeView.md",
         "text": "Renders a tree view of a JSON object or array with collapsible content.\n\n- Use object destructuring to set defaults for certain props.\n- Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\n- Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.\n- Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.\n- Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.\n- For each child in `data`, determine if it is an object or array and recursively render a sub-tree.\n- Otherwise, render a `<p>` element with the appropriate style.\n\n",
         "codeBlocks": {
-          "style": ".tree-element {\r\n  margin: 0;\r\n  position: relative;\r\n}\r\n\r\ndiv.tree-element:before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 24px;\r\n  left: 1px;\r\n  height: calc(100% - 48px);\r\n  border-left: 1px solid gray;\r\n}\r\n\r\n.toggler {\r\n  position: absolute;\r\n  top: 10px;\r\n  left: 0px;\r\n  width: 0;\r\n  height: 0;\r\n  border-top: 4px solid transparent;\r\n  border-bottom: 4px solid transparent;\r\n  border-left: 5px solid gray;\r\n  cursor: pointer;\r\n}\r\n\r\n.toggler.closed {\r\n  transform: rotate(90deg);\r\n}\r\n\r\n.collapsed {\r\n  display: none;\r\n}",
-          "code": "function TreeView({\r\n  data,\r\n  toggled = true,\r\n  name = null,\r\n  isLast = true,\r\n  isChildElement = false,\r\n  isParentToggled = true\r\n}) {\r\n  const [isToggled, setIsToggled] = React.useState(toggled);\r\n\r\n  return (\r\n    <div\r\n      style={{ marginLeft: isChildElement ? 16 : 4 + 'px' }}\r\n      className={isParentToggled ? 'tree-element' : 'tree-element collapsed'}\r\n    >\r\n      <span\r\n        className={isToggled ? 'toggler' : 'toggler closed'}\r\n        onClick={() => setIsToggled(!isToggled)}\r\n      />\r\n      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}\r\n      {Array.isArray(data) ? '[' : '{'}\r\n      {!isToggled && '...'}\r\n      {Object.keys(data).map((v, i, a) =>\r\n        typeof data[v] == 'object' ? (\r\n          <TreeView\r\n            data={data[v]}\r\n            isLast={i === a.length - 1}\r\n            name={Array.isArray(data) ? null : v}\r\n            isChildElement\r\n            isParentToggled={isParentToggled && isToggled}\r\n          />\r\n        ) : (\r\n          <p\r\n            style={{ marginLeft: 16 + 'px' }}\r\n            className={isToggled ? 'tree-element' : 'tree-element collapsed'}\r\n          >\r\n            {Array.isArray(data) ? '' : <strong>{v}: </strong>}\r\n            {data[v]}\r\n            {i === a.length - 1 ? '' : ','}\r\n          </p>\r\n        )\r\n      )}\r\n      {Array.isArray(data) ? ']' : '}'}\r\n      {!isLast ? ',' : ''}\r\n    </div>\r\n  );\r\n}",
-          "example": "let data = {\r\n  lorem: {\r\n    ipsum: 'dolor sit',\r\n    amet: {\r\n      consectetur: 'adipiscing',\r\n      elit: [\r\n        'duis',\r\n        'vitae',\r\n        {\r\n          semper: 'orci'\r\n        },\r\n        {\r\n          est: 'sed ornare'\r\n        },\r\n        'etiam',\r\n        ['laoreet', 'tincidunt'],\r\n        ['vestibulum', 'ante']\r\n      ]\r\n    },\r\n    ipsum: 'primis'\r\n  }\r\n};\r\nReactDOM.render(<TreeView data={data} name=\"data\" />, document.getElementById('root'));"
+          "style": ".tree-element {\n  margin: 0;\n  position: relative;\n}\n\ndiv.tree-element:before {\n  content: '';\n  position: absolute;\n  top: 24px;\n  left: 1px;\n  height: calc(100% - 48px);\n  border-left: 1px solid gray;\n}\n\n.toggler {\n  position: absolute;\n  top: 10px;\n  left: 0px;\n  width: 0;\n  height: 0;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 5px solid gray;\n  cursor: pointer;\n}\n\n.toggler.closed {\n  transform: rotate(90deg);\n}\n\n.collapsed {\n  display: none;\n}",
+          "code": "function TreeView({\n  data,\n  toggled = true,\n  name = null,\n  isLast = true,\n  isChildElement = false,\n  isParentToggled = true\n}) {\n  const [isToggled, setIsToggled] = React.useState(toggled);\n\n  return (\n    <div\n      style={{ marginLeft: isChildElement ? 16 : 4 + 'px' }}\n      className={isParentToggled ? 'tree-element' : 'tree-element collapsed'}\n    >\n      <span\n        className={isToggled ? 'toggler' : 'toggler closed'}\n        onClick={() => setIsToggled(!isToggled)}\n      />\n      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}\n      {Array.isArray(data) ? '[' : '{'}\n      {!isToggled && '...'}\n      {Object.keys(data).map((v, i, a) =>\n        typeof data[v] == 'object' ? (\n          <TreeView\n            data={data[v]}\n            isLast={i === a.length - 1}\n            name={Array.isArray(data) ? null : v}\n            isChildElement\n            isParentToggled={isParentToggled && isToggled}\n          />\n        ) : (\n          <p\n            style={{ marginLeft: 16 + 'px' }}\n            className={isToggled ? 'tree-element' : 'tree-element collapsed'}\n          >\n            {Array.isArray(data) ? '' : <strong>{v}: </strong>}\n            {data[v]}\n            {i === a.length - 1 ? '' : ','}\n          </p>\n        )\n      )}\n      {Array.isArray(data) ? ']' : '}'}\n      {!isLast ? ',' : ''}\n    </div>\n  );\n}",
+          "example": "let data = {\n  lorem: {\n    ipsum: 'dolor sit',\n    amet: {\n      consectetur: 'adipiscing',\n      elit: [\n        'duis',\n        'vitae',\n        {\n          semper: 'orci'\n        },\n        {\n          est: 'sed ornare'\n        },\n        'etiam',\n        ['laoreet', 'tincidunt'],\n        ['vestibulum', 'ante']\n      ]\n    },\n    ipsum: 'primis'\n  }\n};\nReactDOM.render(<TreeView data={data} name=\"data\" />, document.getElementById('root'));"
         },
         "tags": [
           "visual",
@@ -562,7 +562,7 @@
         ]
       },
       "meta": {
-        "hash": "305bd408515e5c575411f40b1bb24f75f6c776cd6387bb083818f2feb9175a70"
+        "hash": "63922e84d527dc7783025495ebab1df55452b595d0a5e54981d8ea891e055736"
       }
     },
     {
@@ -574,8 +574,8 @@
         "text": "Renders an `<input>` element that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<input>` element.\n- Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "function UncontrolledInput({\r\n  callback,\r\n  type = 'text',\r\n  disabled = false,\r\n  readOnly = false,\r\n  placeholder = ''\r\n}) {\r\n  return (\r\n    <input\r\n      type={type}\r\n      disabled={disabled}\r\n      readOnly={readOnly}\r\n      placeholder={placeholder}\r\n      onChange={({ target: { value } }) => callback(value)}\r\n    />\r\n  );\r\n}",
-          "example": "ReactDOM.render(\r\n  <UncontrolledInput\r\n    type=\"text\"\r\n    placeholder=\"Insert some text here...\"\r\n    callback={val => console.log(val)}\r\n  />,\r\n  document.getElementById('root')\r\n);"
+          "code": "function UncontrolledInput({\n  callback,\n  type = 'text',\n  disabled = false,\n  readOnly = false,\n  placeholder = ''\n}) {\n  return (\n    <input\n      type={type}\n      disabled={disabled}\n      readOnly={readOnly}\n      placeholder={placeholder}\n      onChange={({ target: { value } }) => callback(value)}\n    />\n  );\n}",
+          "example": "ReactDOM.render(\n  <UncontrolledInput\n    type=\"text\"\n    placeholder=\"Insert some text here...\"\n    callback={val => console.log(val)}\n  />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "input",
@@ -583,7 +583,7 @@
         ]
       },
       "meta": {
-        "hash": "5aff6673123594949dd0d1e72c8fbb586f402b2eb9fdcf8dd9a2b789b4089adb"
+        "hash": "11581e3b40209c7152833aa421c7d18c889b16067c5cc1557b1bb7f604f18982"
       }
     },
     {
@@ -595,8 +595,8 @@
         "text": "A hook that handles the event of clicking inside the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "const useClickInside = (ref, callback) => {\r\n  const handleClick = e => {\r\n    if (ref.current && ref.current.contains(e.target)) {\r\n      callback();\r\n    }\r\n  };\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClick);\r\n    return () => {\r\n      document.removeEventListener('click', handleClick);\r\n    };\r\n  });\r\n};",
-          "example": "const ClickBox = ({ onClickInside }) => {\r\n  const clickRef = React.useRef();\r\n  useClickInside(clickRef, onClickInside);\r\n  return (\r\n    <div\r\n      className=\"click-box\"\r\n      ref={clickRef}\r\n      style={{\r\n        border: '2px dashed orangered',\r\n        height: 200,\r\n        width: 400,\r\n        display: 'flex',\r\n        justifyContent: 'center',\r\n        alignItems: 'center'\r\n      }}\r\n    >\r\n      <p>Click inside this element</p>\r\n    </div>\r\n  );\r\n};\r\n\r\nReactDOM.render(\r\n  <ClickBox onClickInside={() => alert('click inside')} />,\r\n  document.getElementById('root')\r\n);"
+          "code": "const useClickInside = (ref, callback) => {\n  const handleClick = e => {\n    if (ref.current && ref.current.contains(e.target)) {\n      callback();\n    }\n  };\n  React.useEffect(() => {\n    document.addEventListener('click', handleClick);\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  });\n};",
+          "example": "const ClickBox = ({ onClickInside }) => {\n  const clickRef = React.useRef();\n  useClickInside(clickRef, onClickInside);\n  return (\n    <div\n      className=\"click-box\"\n      ref={clickRef}\n      style={{\n        border: '2px dashed orangered',\n        height: 200,\n        width: 400,\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center'\n      }}\n    >\n      <p>Click inside this element</p>\n    </div>\n  );\n};\n\nReactDOM.render(\n  <ClickBox onClickInside={() => alert('click inside')} />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "hooks",
@@ -606,7 +606,7 @@
         ]
       },
       "meta": {
-        "hash": "f2e5c4b9e8c44a5fb9a1f8002cfbeb2d6090cfe97d4d15dcc575ce89611bb599"
+        "hash": "1be6623c673a30671e534ac363e5acffdedc8d890fad5f73a7cafc7c7402bb75"
       }
     },
     {
@@ -618,8 +618,8 @@
         "text": "A hook that handles the event of clicking outside of the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "const useClickOutside = (ref, callback) => {\r\n  const handleClick = e => {\r\n    if (ref.current && !ref.current.contains(e.target)) {\r\n      callback();\r\n    }\r\n  };\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClick);\r\n    return () => {\r\n      document.removeEventListener('click', handleClick);\r\n    };\r\n  });\r\n};",
-          "example": "const ClickBox = ({ onClickOutside }) => {\r\n  const clickRef = React.useRef();\r\n  useClickOutside(clickRef, onClickOutside);\r\n  return (\r\n    <div\r\n      className=\"click-box\"\r\n      ref={clickRef}\r\n      style={{\r\n        border: '2px dashed orangered',\r\n        height: 200,\r\n        width: 400,\r\n        display: 'flex',\r\n        justifyContent: 'center',\r\n        alignItems: 'center'\r\n      }}\r\n    >\r\n      <p>Click out of this element</p>\r\n    </div>\r\n  );\r\n};\r\n\r\nReactDOM.render(\r\n  <ClickBox onClickOutside={() => alert('click outside')} />,\r\n  document.getElementById('root')\r\n);"
+          "code": "const useClickOutside = (ref, callback) => {\n  const handleClick = e => {\n    if (ref.current && !ref.current.contains(e.target)) {\n      callback();\n    }\n  };\n  React.useEffect(() => {\n    document.addEventListener('click', handleClick);\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  });\n};",
+          "example": "const ClickBox = ({ onClickOutside }) => {\n  const clickRef = React.useRef();\n  useClickOutside(clickRef, onClickOutside);\n  return (\n    <div\n      className=\"click-box\"\n      ref={clickRef}\n      style={{\n        border: '2px dashed orangered',\n        height: 200,\n        width: 400,\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center'\n      }}\n    >\n      <p>Click out of this element</p>\n    </div>\n  );\n};\n\nReactDOM.render(\n  <ClickBox onClickOutside={() => alert('click outside')} />,\n  document.getElementById('root')\n);"
         },
         "tags": [
           "hooks",
@@ -629,7 +629,7 @@
         ]
       },
       "meta": {
-        "hash": "e8f3e64cd0cf616dd42843328234e37b1b7a77ed51da8956204fdb02e088ce33"
+        "hash": "e565a610582386df7a41cbcfcd2d2ad7df11651adceafdd9e4840ca2b756af21"
       }
     },
     {
@@ -641,8 +641,8 @@
         "text": "A hook that implements `fetch` in a declarative manner.\n\n- Create a custom hook that takes a `url` and `options`.\n- Use the `React.useState()` hook to initialize the `response` and `error` state variables.\n- Use the `React.useEffect()` hook to anychronously call `fetch()` and update the state varaibles accordingly.\n- Return an object containting the `response` and `error` state variables.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "const useFetch = (url, options) => {\r\n  const [response, setResponse] = React.useState(null);\r\n  const [error, setError] = React.useState(null);\r\n\r\n  React.useEffect(() => {\r\n    const fetchData = async () => {\r\n      try {\r\n        const res = await fetch(url, options);\r\n        const json = await res.json();\r\n        setResponse(json);\r\n      } catch (error) {\r\n        setError(error);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, []);\r\n\r\n  return { response, error };\r\n};",
-          "example": "const ImageFetch = props => {\r\n  const res = useFetch('https://dog.ceo/api/breeds/image/random', {});\r\n  if (!res.response) {\r\n    return <div>Loading...</div>;\r\n  }\r\n  const dogName = res.response.status;\r\n  const imageUrl = res.response.message;\r\n  return (\r\n    <div>\r\n      <img src={imageUrl} alt=\"avatar\" width={400} height=\"auto\" />\r\n    </div>\r\n  );\r\n};\r\n\r\nReactDOM.render(<ImageFetch />, document.getElementById('root'));"
+          "code": "const useFetch = (url, options) => {\n  const [response, setResponse] = React.useState(null);\n  const [error, setError] = React.useState(null);\n\n  React.useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const res = await fetch(url, options);\n        const json = await res.json();\n        setResponse(json);\n      } catch (error) {\n        setError(error);\n      }\n    };\n    fetchData();\n  }, []);\n\n  return { response, error };\n};",
+          "example": "const ImageFetch = props => {\n  const res = useFetch('https://dog.ceo/api/breeds/image/random', {});\n  if (!res.response) {\n    return <div>Loading...</div>;\n  }\n  const dogName = res.response.status;\n  const imageUrl = res.response.message;\n  return (\n    <div>\n      <img src={imageUrl} alt=\"avatar\" width={400} height=\"auto\" />\n    </div>\n  );\n};\n\nReactDOM.render(<ImageFetch />, document.getElementById('root'));"
         },
         "tags": [
           "hooks",
@@ -652,7 +652,7 @@
         ]
       },
       "meta": {
-        "hash": "848cb6ba4f8bd5dad012a38e6bd0e7c829a79b3215a23939c30a3f652627da4f"
+        "hash": "2b621b216e6f8225c435deff5ca567628e97c5a39bb20f5b19c92f521a8a8f0c"
       }
     },
     {
@@ -664,8 +664,8 @@
         "text": "A hook that implements `setInterval` in a declarative manner.\n\n- Create a custom hook that takes a `callback` and a `delay`.\n- Use the `React.useRef()` hook to create a `ref` for the callback function.\n- Use the `React.useEffect()` hook to remember the latest callback.\n- Use the `Rect.useEffect()` hook to set up the interval and clean up.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "const useInterval = (callback, delay) => {\r\n  const savedCallback = React.useRef();\r\n\r\n  React.useEffect(() => {\r\n    savedCallback.current = callback;\r\n  }, [callback]);\r\n\r\n  React.useEffect(() => {\r\n    function tick() {\r\n      savedCallback.current();\r\n    }\r\n    if (delay !== null) {\r\n      let id = setInterval(tick, delay);\r\n      return () => clearInterval(id);\r\n    }\r\n  }, [delay]);\r\n};",
-          "example": "const Timer = props => {\r\n  const [seconds, setSeconds] = React.useState(0);\r\n  useInterval(() => {\r\n    setSeconds(seconds + 1);\r\n  }, 1000);\r\n\r\n  return <p>{seconds}</p>;\r\n};\r\n\r\nReactDOM.render(<Timer />, document.getElementById('root'));"
+          "code": "const useInterval = (callback, delay) => {\n  const savedCallback = React.useRef();\n\n  React.useEffect(() => {\n    savedCallback.current = callback;\n  }, [callback]);\n\n  React.useEffect(() => {\n    function tick() {\n      savedCallback.current();\n    }\n    if (delay !== null) {\n      let id = setInterval(tick, delay);\n      return () => clearInterval(id);\n    }\n  }, [delay]);\n};",
+          "example": "const Timer = props => {\n  const [seconds, setSeconds] = React.useState(0);\n  useInterval(() => {\n    setSeconds(seconds + 1);\n  }, 1000);\n\n  return <p>{seconds}</p>;\n};\n\nReactDOM.render(<Timer />, document.getElementById('root'));"
         },
         "tags": [
           "hooks",
@@ -674,7 +674,7 @@
         ]
       },
       "meta": {
-        "hash": "04b22b339da3652cd044203a1d9723af542afe13572a38da825bd093ab1c99af"
+        "hash": "2a5dbbdb2da60c42a738211e43997f45fe416f4cb069fbb53b1369549f446319"
       }
     },
     {
@@ -686,8 +686,8 @@
         "text": "A hook that implements `setTimeout` in a declarative manner.\n\n- Create a custom hook that takes a `callback` and a `delay`.\n- Use the `React.useRef()` hook to create a `ref` for the callback function.\n- Use the `React.useEffect()` hook to remember the latest callback.\n- Use the `Rect.useEffect()` hook to set up the timeout and clean up.\n\n",
         "codeBlocks": {
           "style": "",
-          "code": "const useTimeout = (callback, delay) => {\r\n  const savedCallback = React.useRef();\r\n\r\n  React.useEffect(() => {\r\n    savedCallback.current = callback;\r\n  }, [callback]);\r\n\r\n  React.useEffect(() => {\r\n    function tick() {\r\n      savedCallback.current();\r\n    }\r\n    if (delay !== null) {\r\n      let id = setTimeout(tick, delay);\r\n      return () => clearTimeout(id);\r\n    }\r\n  }, [delay]);\r\n};",
-          "example": "const OneSecondTimer = props => {\r\n  const [seconds, setSeconds] = React.useState(0);\r\n  useTimeout(() => {\r\n    setSeconds(seconds + 1);\r\n  }, 1000);\r\n\r\n  return <p>{seconds}</p>;\r\n};\r\n\r\nReactDOM.render(<OneSecondTimer />, document.getElementById('root'));"
+          "code": "const useTimeout = (callback, delay) => {\n  const savedCallback = React.useRef();\n\n  React.useEffect(() => {\n    savedCallback.current = callback;\n  }, [callback]);\n\n  React.useEffect(() => {\n    function tick() {\n      savedCallback.current();\n    }\n    if (delay !== null) {\n      let id = setTimeout(tick, delay);\n      return () => clearTimeout(id);\n    }\n  }, [delay]);\n};",
+          "example": "const OneSecondTimer = props => {\n  const [seconds, setSeconds] = React.useState(0);\n  useTimeout(() => {\n    setSeconds(seconds + 1);\n  }, 1000);\n\n  return <p>{seconds}</p>;\n};\n\nReactDOM.render(<OneSecondTimer />, document.getElementById('root'));"
         },
         "tags": [
           "hooks",
@@ -696,7 +696,7 @@
         ]
       },
       "meta": {
-        "hash": "507c6fc6be62127e00738e39c6b22686a100b8af7252e1bbe589480b126c3d79"
+        "hash": "c07ecd818ad2e330d5bf4010da4464ac1aa76f1dcafec4cb7d9a8168313b68e9"
       }
     }
   ],