Travis build: 282

snippet_data/snippetList.json

@@ -57,7 +57,7 @@
       "type": "snippetListing",
       "title": "Carousel",
       "attributes": {
-        "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.useEffect()` 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",
+        "text": "Renders a carousel component.\n\n- Use the `React.useState()` 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.useEffect()` 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",
         "tags": [
           "visual",
           "children",
@@ -67,7 +67,7 @@
         ]
       },
       "meta": {
-        "hash": "4e224ce57a85a9061c065603496ae2a80db43d2ab7908d1c08c7dcbe5779a2d6"
+        "hash": "18bc23f64d46aa17912ec9f854cde7ebff2395ef3936da2e7e60870221e9f47b"
       }
     },
     {

snippet_data/snippets.json

@@ -88,7 +88,7 @@
       "type": "snippet",
       "attributes": {
         "fileName": "Carousel.md",
-        "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.useEffect()` 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",
+        "text": "Renders a carousel component.\n\n- Use the `React.useState()` 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.useEffect()` 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) {\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    return () => clearTimeout(scrollInterval);\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}",
@@ -103,10 +103,10 @@
         ]
       },
       "meta": {
-        "hash": "4e224ce57a85a9061c065603496ae2a80db43d2ab7908d1c08c7dcbe5779a2d6",
+        "hash": "18bc23f64d46aa17912ec9f854cde7ebff2395ef3936da2e7e60870221e9f47b",
         "firstSeen": "1542137095",
-        "lastUpdated": "1568839108",
+        "lastUpdated": "1583265260",
-        "updateCount": 12,
+        "updateCount": 13,
         "authorCount": 3
       }
     },