Travis build: 49

snippet_data/snippetList.json

@@ -268,6 +268,23 @@
         "hash": "b9d1d5a6b61d2ab8e73943da1dcf86bfa872821c9584715a2cee303a052334ea"
       }
     },
+    {
+      "id": "RippleButton",
+      "type": "snippetListing",
+      "title": "RippleButton",
+      "attributes": {
+        "text": "### RippleButton\n\nRenders a button that animates a ripple effect when clicked.\n\n- Define some appropriate CSS styles and an animation for the ripple effect.\n- Use the `React.useState()` hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.\n- Use the `React.useEffect()` hook to change the state every time the `coords` state variable changes, starting the animation.\n- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.\n- Use the `React.useEffect()` hook a second time to reset `coords` whenever the `isRippling` state variable is `false.`\n- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.\n- Finally, render a `<button>` with one or two `<span>` elements, setting the position of the `.ripple` element based on the `coords` state variable.\n\n",
+        "tags": [
+          "visual",
+          "state",
+          "effect",
+          "intermediate"
+        ]
+      },
+      "meta": {
+        "hash": "95d8e2f6113d2d38c90c3f6d0f765cc48cbc85a14cc77613b0c9b09156684116"
+      }
+    },
     {
       "id": "Select",
       "type": "snippetListing",

snippet_data/snippets.json

@@ -364,6 +364,29 @@
         "hash": "b9d1d5a6b61d2ab8e73943da1dcf86bfa872821c9584715a2cee303a052334ea"
       }
     },
+    {
+      "id": "RippleButton",
+      "title": "RippleButton",
+      "type": "snippet",
+      "attributes": {
+        "fileName": "RippleButton.md",
+        "text": "### RippleButton\n\nRenders a button that animates a ripple effect when clicked.\n\n- Define some appropriate CSS styles and an animation for the ripple effect.\n- Use the `React.useState()` hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.\n- Use the `React.useEffect()` hook to change the state every time the `coords` state variable changes, starting the animation.\n- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.\n- Use the `React.useEffect()` hook a second time to reset `coords` whenever the `isRippling` state variable is `false.`\n- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.\n- Finally, render a `<button>` with one or two `<span>` elements, setting the position of the `.ripple` element based on the `coords` state variable.\n\n",
+        "codeBlocks": {
+          "style": ".ripple-button {\n  border-radius: 4px;\n  border: none;\n  margin: 8px;\n  padding: 14px 24px;\n  background: #1976d2;\n  color: #fff;\n  overflow: hidden;\n  position: relative;\n  cursor: pointer;\n}\n\n.ripple-button > .ripple {\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  background: #63a4ff;\n  display: block;\n  content: \"\";\n  border-radius: 9999px;\n  opacity: 1;\n  animation: 1.2s ease 1 forwards ripple-effect;\n}\n\n@keyframes ripple-effect {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(10);\n    opacity: 0.375;\n  }\n  100% {\n    transform: scale(35);\n    opacity: 0;\n  }\n}\n\n.ripple-button > .content {\n  position: relative;\n  z-index: 2;\n}",
+          "code": "function RippleButton({ children, onClick }) {\n  const [coords, setCoords] = React.useState({ x: -1, y: -1 });\n  const [isRippling, setIsRippling] = React.useState(false);\n\n  React.useEffect(\n    () => {\n      if (coords.x !== -1 && coords.y !== -1) {\n        setIsRippling(true);\n        setTimeout(() => setIsRippling(false), 1200);\n      } else setIsRippling(false);\n    },\n    [coords]\n  );\n\n  React.useEffect(\n    () => {\n      if (!isRippling) setCoords({ x: -1, y: -1 });\n    },\n    [isRippling]\n  );\n\n  return (\n    <button\n      className=\"ripple-button\"\n      onClick={e => {\n        var rect = e.target.getBoundingClientRect();\n        var x = e.clientX - rect.left;\n        var y = e.clientY - rect.top;\n        setCoords({ x, y });\n        onClick && onClick(e);\n      }}\n    >\n      {isRippling ? (\n        <span\n          className=\"ripple\"\n          style={{\n            left: coords.x + 10,\n            top: coords.y\n          }}\n        />\n      ) : (\n        \"\"\n      )}\n      <span className=\"content\">{children}</span>\n    </button>\n  );\n}",
+          "example": "ReactDOM.render(\n  <RippleButton onClick={e => console.log(e)}>Click me</RippleButton>,\n  document.getElementById('root')\n);"
+        },
+        "tags": [
+          "visual",
+          "state",
+          "effect",
+          "intermediate"
+        ]
+      },
+      "meta": {
+        "hash": "95d8e2f6113d2d38c90c3f6d0f765cc48cbc85a14cc77613b0c9b09156684116"
+      }
+    },
     {
       "id": "Select",
       "title": "Select",