15-Minute Ripple Effect Button in React

1. Welcome & Course Overview: Welcome to this course. In just 15 minutes, you will learn how to create an awesome repel animation on a button using react. Here's what you can expect two approaches. We'll start by quickly reviewing a basic version that shows the core idea. When you click the button, a repel appears. Then we'll dive into an advanced version that fine tunes the effect using modern react techniques and best practices. Project based learning. This isn't about long lectures. You get straight to the code with each step explained clearly, so you can apply it right away. First consists teaching. I keep things brief and energetic so you don't waste time. You will pick up real world skills that you can use on your own projects. By the end, you will have a neat interactive button and a deeper understanding of react animations that will boost your web development toolkit. Let's jump in and create something awesome. 2. Setup: Create React App: Start with an empty project folder and use VS code, a powerful and user friendly code editor. First, open the atlratd terminal in VS code. Now we'll create our react app using the photon command. Px, create react app dot. The dot at the end tells PX to create the react app inside the Korean directory instead of making a new folder, press Enter and wait for the installation to finish. This process will set up everything we need to start coding and react. Alright, once the setup is complete, let's clear the terminal. Now let's take a look at our project structure. In the File Explorer, you'll see several files and folders. The most important one for now is app dots. This is where the main logic of our app happens. To preview our project in the browser, run NPM start. This will open a new browser window showing React default welcome page. Let's organize our project by creating a separate component for our button. Inside the SFC folder, create a new folder called components. Then inside that folder, create a new file, call button dot GSX. This will be our custom button component, and in the next lesson, we'll start building it step by step. 3. Preparing the Button component : Right, this is our project ready for us to work with. I've added CSS file here and named it Cool button to CSS. It contains the CSS styles for our cool button component. You'll find this file in the resources section with comments about what its CSS property does. Now let's start coding our cool button component. First, import react from the Act, then let's import our styles from the Cool button CSS module. Create a function cool button with a capital C and use an arrow function. Function will return a GSX code, which is going to be a button element with the text, click M. We're going to give our button the class name Cool dash button, which you will find in study CSS file, it's going to give our button a cool and interactive style. Now at the end of the file write Export default cool button. This will make the cool button component reusable throughout our project. Our component to be rendered, we need to use it inside the Abdo GS file inside this dev element. Make sure you have imported it like so. Also, we need to edit the app class for this dev element to place the cool button in the center of the page. So inside the Abdo CSS file and inside the APCSS class, add these CSS properties, and they should do the work. Let's run this app and see the result and stat the terminal one NPM start. When the local House server starts, the app will be rendered inside the browser and you'll see our cool button in the middle of the page. It has a cool hover effect and a click effect with a beautiful gradient background and a nice shadow that gives the button a little bit of depth. You can check the CSS file in the resources section where you'll find comments about what CSS class and property does. That's it for this lesson. This is just preparation for the project, and the next couple of lessons we'll dive into the juicy stuff. So let's move. 4. Beginner Approach: Basic Ripple Animation effect: Okay, this is where we left our button from the previous lesson. It looks good, but we want to make it cooler by adding ripple click effect. First, we will start with the basic not so advanced way of creating the click effect. Then in the next lesson, I'll show you the correct way of doing these kinds of effects. By knowing the basic way and the advanced way of doing things, you'll develop strong problem solving skills, and that's the ultimate goal of this class. Let's get started. First, inside the button, create span element just below the click me text. This will act as our ripple effect when the button is clicked. Give the span a class name of ripple. This class is defined inside the cool button dot CSS file. Check the resources for detailed information about the CSS code. Go back to the ripple and add a style attribute. Inside this subject, we will add some properties to control the position and size of the ripple. Set left to zero, top to zero, width to 100%, and high to 100%. Now, every time you roll out the page, you can see the ripple effect on the bottom. That's because whenever the pace loads, the ripple element will be loaded with the CSS styles too, and whenever the CSS styles load, any animation we have is going to be triggered automatically. And that's the case of our ripple animation right here. What we want is to trigger the effect on every click event. So on the button element, add an onclick attribute and set it equal to handle click. Over here, create a handle click function. Click, we trigger the ripple animation by adding and then removing the span, a simple way to run an animation. For that, we will use a react state set animate to true. Of course, we need to define the state over here, and we will use the use state hug and set the initial state to false and port state from react. Now we will use the animate state to render the span, wrap the span inside two purely bases, and add the animate state variable like so. This will tell react I animate is true, then render the span. If it is false, don't render the span. Now save the code, and let's test. Click on the button, and the pul animation is triggered. But if you click again, nothing happens because we didn't reset the animate state back to force. To have this toggle mechanism, we come here and set the handle click function and add this set time out, which waits for 600 milliseconds, which is the animation time range defined inside the po CSS class. After 600 milliseconds, the callback will be triggered and we will call the set animate function, which will reset the animate state back to force. You can click multiple times on the button, and the ripple effect will run every time. But as you can see, the animation doesn't look good, especially when I click very fast. On top of that, we want the ripples to start from the position where we clicked on the button with our mouse cursor. We can do better than this with a more advanced code implementation. In the next lesson, we will make this animation smoother and fun to play with, especially when it follows your cursor position. 5. Advanced Approach: Pro Ripple Animation Techniques: The rappel animation effect is working, but not quite well. It doesn't look good. It acts weird, and it's not smooth at all. That's due to our bad code implementation. So in this lesson, we'll fix it. Believe me, it's going to be super easy and fun. First, let's remove the code inside the handle click function. Remove the animation state from here and over here as well. Let's wrap our click handler in use callback react hook to optimize performance and prevent unnecessary re renders. Add an interray at the end like this, which makes sure the function is only created once. Make sure to import the us callback hook from react. Now the overall idea of creating ripples is going to change. We'll use an array to track multiple ripple facts. Every time the button is clicked, we'll add a new ripple object to the array, which will store its position and trigger the animation. After a short delay, we'll remove that ripple from the array to keep things clean. This way, multiple ripples can appear and disappear smoothly when clicking the button. Let's add a new state to store the ripples, call it ripples, like so. Inside the handle, click function called set ripples. Take the previous ripples, and in a coback return a new array with the old ripples and a new one. It's going to be new ripple for now. Down here, we will use the ripple array to determine how many ripples we need to render based on the array length. At ripples dot map with the cobac that takes its ripple and the key argument, which is created by default with react. Now take the ripple span element, cut it, and place it inside the cobac between two parentheses like so. Add a key attribute and set it equal to the key argument. Save the code, and let's test the result. The animation still works, and here's the moment of truth. When I click very fast, the ripples are created one after the other in a smooth way. But we still have the problem. Let's inspect the source code of the page. And inside our button element, we can see a disaster. The ripple span element is rendered many times inside the dome. This will definitely affect performance. We want to remove its ripple after a small duration of time and keep our dome clean. Inside the handle click function, add a set timeout with a callback. Set the timeout duration to 600 milliseconds, which is the animation duration defined inside the po CSS class for the po animation defined right here. After 600 milliseconds, call set ripples. Take the previous array and return prev dot filter with a callback that takes its ripple and filters out or removes ripples that don't have a key equal to u ripple dot key. So we want to only keep New ripple and remove the rest. The new ripple doesn't exist yet, so let's define it right over here. It's going to be a constant and an object. This object will represent its ripple, and its ripple is going to have these style properties. So we will define something close to that inside this object. Add an X property with value zero, a Y property with value zero, and a size of value 100%. X and Y properties are going to hold the position of the cursor when we click on the bottom, and the size property is to make the repel cover the entire button. We will handle this in a while, but for now, keep these values. And finally, we're going to have a key property because we're using it over here and it's always best to create our own keys rather than relying on react to do that. So set its value to date dot now. Replace this new repel string with a new repel Javascript constant. For the key attribute, let's use ripple dot key. Let's say this and the animation still works. And most importantly, if we inspect this inside the button element, well, we need to reload the application so we start fresh. Right now, if I click on the button, you'll notice that the ripple span element appears, and then after 600 milliseconds, it disappears. Now we are still missing something. We want to control the ripple position and size programmatically. So we need to use the ripple object properties to style the ripple span. Let's replace this with ripple dot X. Top, set it to ripple dot Y, and for the width and height, use ripple dot size. These properties still don't have any effect on the ripples yet. We will define their values based on the button references. Over here, define a button ref constant. We will use the use Rf react hook and set its initial value to a null. Make sure to impart the use Rf hook from react. Using this hook, we'll be able to define the position of the cursor on the button and determine the size of the ripple. All right, now add the ref attribute to the button element and set its value to button ref. This way, the button ref constant will hold the reference of the button in the doll. At the handle click function, define a constant. Rect is short for rectangle because it's going to represent the button's rectangular shape and its position on the screen. Sets value to button Rf, dot current dot get bounding client Rt, which is a function that you have to call. Let's console log the rat variable and see what it gives us. When I click, I get this output on the console. So get bounding client track, gives us this information about the button, which we will use to calculate the buttons position and size. Remove the console log add a size constant, calculate the size using math dot max function, which gives us the maximum of two given numbers, passing g dot width and g dot height. This sets the po size to the larger dimension of the button width or height so that the effect fully covers the button when animating. Now let's calculate the X coordinate of the cursor when we click on the button. So we need to access the click event. React we'll pass the click event by default to the function as an argument. We will call it E short for event. From the click event, we take the clicks x coordinate E dot client X, subtract the buttons left position, right dot left, and adjust it by half the po size. So size divided by two to center. This calculates the ripples X position inside the button. Next, define Y constant. We take the clicks Y coordinate E client Y, subtract the buttons top position, dot top, and adjust by half the ripple size, so we center it. So size divided by two. This calculates the ripples Y position inside the button. Now we will use these calculations inside the new ripple object to shape our ripple. So for this size, we will refer to the calculated size. For the Y property, we will refer to the Y coordinate of the cursor and the same for the X coordinate. And that's the final piece to create this magic spell. Let's save this and check out the results. Close this window, and when I click, the ripples start animating from Y cursor precision, and the size of the ripple covers the entire button. We went from basic implementation to advanced implementation of this button animation effect, and you have learned a new skill and a new perspective of how things should be built and react. Finishing this course is really a big achievement. It shows that you have the spark that motivates you to spend time and effort to learn new things. And that, my friend, is the most important thing in any successful story. I'll leave you here, but feel free to follow me and submit your project on the project's portfolio on Skill Share, so you can get feedback and maybe try to come up with your own logic or animation and share it with other learners and with me. I'll be happy to see your creations.