From 83dfa1f2273e7dcb2ebeb257881e92c01975b7b2 Mon Sep 17 00:00:00 2001 From: Isabelle Viktoria Maciohsek Date: Thu, 26 Nov 2020 09:43:21 +0200 Subject: [PATCH] Update snippets --- snippets/FileDrop.md | 27 ++++++++++++++----------- snippets/RippleButton.md | 43 +++++++++++++++------------------------- 2 files changed, 31 insertions(+), 39 deletions(-) diff --git a/snippets/FileDrop.md b/snippets/FileDrop.md index 4a8451bb1..223b88480 100644 --- a/snippets/FileDrop.md +++ b/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 `
` and use `drag` and `filename` to determine its contents and style. -- Finally, bind the `ref` of the created `
` 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 (
- {filename && !drag ?
{filename}
:
Drop files here!
} + {filename && !drag ?
{filename}
:
Drop a file here!
}
); }; ``` ```jsx -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( + , + document.getElementById('root') +); ``` diff --git a/snippets/RippleButton.md b/snippets/RippleButton.md index 2849ba184..77fbf123a 100644 --- a/snippets/RippleButton.md +++ b/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 `