Update snippets

snippets/FileDrop.md

@@ -1,18 +1,16 @@
 ---
 title: FileDrop
-tags: components,input,state,effect,event,intermediate
+tags: components,input,state,effect,event,advanced
 ---
 
 Renders a file drag and drop component for a single file.
 
-- Create a ref called `dropRef` for this component.
-- Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
-  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.
-- Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.
-- 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.
+- Create a ref, called `dropRef` and bind it to the component's wrapper.
+- Use the `useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
+- 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.
+- Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality.
 - `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 `onDrop`.
-- Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.
-- Finally, bind the `ref` of the created `<div>` to `dropRef`.
+- Use the `useEffect()` hook to handle each of the drag and drop events using the previously created methods.
 
 ```css
 .filedrop {
@@ -77,7 +75,7 @@ const FileDrop = ({ onDrop }) => {
     div.addEventListener('dragleave', handleDragOut);
     div.addEventListener('dragover', handleDrag);
     div.addEventListener('drop', handleDrop);
-    return function cleanup() {
+    return () => {
       div.removeEventListener('dragenter', handleDragIn);
       div.removeEventListener('dragleave', handleDragOut);
       div.removeEventListener('dragover', handleDrag);
@@ -88,14 +86,19 @@ const FileDrop = ({ onDrop }) => {
   return (
     <div
       ref={dropRef}
-      className={drag ? 'filedrop drag' : filename ? 'filedrop ready' : 'filedrop'}
+      className={
+        drag ? 'filedrop drag' : filename ? 'filedrop ready' : 'filedrop'
+      }
     >
-      {filename && !drag ? <div>{filename}</div> : <div>Drop files here!</div>}
+      {filename && !drag ? <div>{filename}</div> : <div>Drop a file here!</div>}
     </div>
   );
 };
 ```
 
 ```jsx
-ReactDOM.render(<FileDrop onDrop={console.log} />, document.getElementById('root'));
+ReactDOM.render(
+  <FileDrop onDrop={console.log} />,
+  document.getElementById('root')
+);
 ```

snippets/RippleButton.md

@@ -5,13 +5,11 @@ tags: components,state,effect,intermediate
 
 Renders a button that animates a ripple effect when clicked.
 
-- Define some appropriate CSS styles and an animation for the ripple effect.
-- Use the `React.useState()` hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.
-- Use the `React.useEffect()` hook to change the state every time the `coords` state variable changes, starting the animation.
+- Use the `useState()` hook to create the `coords` and `isRippling` state variables for the pointer's coordinates and the animation state of the button respectively.
+- Use a `useEffect()` hook to change the value of `isRippling` every time the `coords` state variable changes, starting the animation.
 - Use `setTimeout()` in the previous hook to clear the animation after it's done playing.
-- Use the `React.useEffect()` hook a second time to reset `coords` whenever the `isRippling` state variable is `false.`
+- Use a `useEffect()` hook to reset `coords` whenever the `isRippling` state variable is `false.`
 - Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.
-- Finally, render a `<button>` with one or two `<span>` elements, setting the position of the `.ripple` element based on the `coords` state variable.
 
 ```css
 .ripple-button {
@@ -35,7 +33,7 @@ Renders a button that animates a ripple effect when clicked.
   content: "";
   border-radius: 9999px;
   opacity: 1;
-  animation: 1.2s ease 1 forwards ripple-effect;
+  animation: 0.9s ease 1 forwards ripple-effect;
 }
 
 @keyframes ripple-effect {
@@ -57,7 +55,6 @@ Renders a button that animates a ripple effect when clicked.
   position: relative;
   z-index: 2;
 }
-
 ```
 
 ```jsx
@@ -65,31 +62,23 @@ const RippleButton = ({ children, onClick }) => {
   const [coords, setCoords] = React.useState({ x: -1, y: -1 });
   const [isRippling, setIsRippling] = React.useState(false);
 
-  React.useEffect(
-    () => {
-      if (coords.x !== -1 && coords.y !== -1) {
-        setIsRippling(true);
-        setTimeout(() => setIsRippling(false), 1200);
-      } else setIsRippling(false);
-    },
-    [coords]
-  );
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+      setTimeout(() => setIsRippling(false), 300);
+    } else setIsRippling(false);
+  }, [coords]);
 
-  React.useEffect(
-    () => {
-      if (!isRippling) setCoords({ x: -1, y: -1 });
-    },
-    [isRippling]
-  );
+  React.useEffect(() => {
+    if (!isRippling) setCoords({ x: -1, y: -1 });
+  }, [isRippling]);
 
   return (
     <button
       className="ripple-button"
       onClick={e => {
-        var rect = e.target.getBoundingClientRect();
-        var x = e.clientX - rect.left;
-        var y = e.clientY - rect.top;
-        setCoords({ x, y });
+        const rect = e.target.getBoundingClientRect();
+        setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
         onClick && onClick(e);
       }}
     >
@@ -97,7 +86,7 @@ const RippleButton = ({ children, onClick }) => {
         <span
           className="ripple"
           style={{
-            left: coords.x + 10,
+            left: coords.x,
             top: coords.y
           }}
         />