From aa3f7c094ce53c7dff72f176e9829abbd982c9eb Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Tue, 3 Mar 2020 19:55:21 +0000 Subject: [PATCH] Travis build: 282 --- snippet_data/snippetList.json | 4 ++-- snippet_data/snippets.json | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json index 1c4459b8b..c2d043ad1 100644 --- a/snippet_data/snippetList.json +++ b/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" } }, { diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json index 7d20d46a6..44be288f5 100644 --- a/snippet_data/snippets.json +++ b/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
\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
\n );\n}", @@ -103,10 +103,10 @@ ] }, "meta": { - "hash": "4e224ce57a85a9061c065603496ae2a80db43d2ab7908d1c08c7dcbe5779a2d6", + "hash": "18bc23f64d46aa17912ec9f854cde7ebff2395ef3936da2e7e60870221e9f47b", "firstSeen": "1542137095", - "lastUpdated": "1568839108", - "updateCount": 12, + "lastUpdated": "1583265260", + "updateCount": 13, "authorCount": 3 } },