Build a Referral System with Laravel
This episode is for members only

Sign up to access "Build a Referral System with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
08. Clicking to copy to the clipboard

Episodes

0%
Your progress
  • Total: 2h 39m
  • Played: 0m
  • Remaining: 2h 39m
Join or sign in to track your progress

Transcript

00:00
All right so we want to make it super easy for users to copy and paste this link to people or anywhere else they want to use it, so let's implement the ability to click to copy to the
00:09
clipboard. So for this we're going to use the Alpine Clipboard plugin, just a bit of background if you're new to Laravel, when we installed Laravel we over in our app.js just got Alpine functionality, so we're not building this with any specific framework, we're just working with Blade and Alpine, so with this we're going to use an Alpine plugin which is just a very small
00:31
javascript library for interactivity on a page to get this working, so if this doesn't make too much sense don't worry, think of it kind of like jQuery but a much more modern version. Okay so let's go over to our Alpine Clipboard plugin github repository and let's go ahead and do an npm install on this so we can get that pulled in and then we just need to register this, so let's
00:53
just go ahead and copy and paste what we need to do and we do that over in app.js, so we've imported Alpine, we're going to import the clipboard plugin and then we're just going to use the plugin method on Alpine to go ahead and pull this in, so let's just do this and we should be good, great. Okay so one caveat here is that you have to be working with HTTPS to actually allow things to be copied to
01:16
the clipboard, so I'm working locally but I am working on HTTPS, if you're not this is just not going to work, so you want to make sure you switch over in your local environment. Okay so now let's get straight down to the link that we're going to actually click to copy, so we want to make this whole thing here an Alpine component, so to do that we go ahead and initialize this with some data,
01:41
so inside of here what we want to do is store the link inside of this data and then when we click on this button we can attach an event handler within Alpine to grab this link and put it on the clipboard, you can use this to fetch it out of the input you already have but I find it a lot easier just to duplicate this and have a property within Alpine here which we can easily copy.
02:04
Okay so let's build out a copy function inside of here which we'll go ahead and click to copy this, so to use this plugin we just use clipboard like so and then we just provide in the link and that's it, that's going to go ahead and copy that to the clipboard and we've already got the reference to the link there, so how do we invoke this copy method, well we just go ahead and say X on click
02:29
and call that function and that's it, so let's try this out and we will make sure it's not already in the clipboard and it's not, click to copy and there we go it's as easy as that, so we have this copying to the clipboard but it doesn't look like anything's actually happening at the moment so let's go ahead and add in some additional functionality to make this look better,
02:53
so we need to know locally whether this has been copied or not so we can switch around the text here, show a message whatever we need to do, so in here what we're going to do is after we have copied this we're going to set copied to true and then we can adjust the text within this button whether that's been copied or not, so we can either get rid of the text in the button or leave it as
03:14
the default copy link and then we can use the X text directive to change this around based on that condition, so we can do an internery in here and say well if it's been copied we're going to output the text copied, otherwise we're just going to output the text copy link which matches up with what we already have in the button, so we click to copy, copy gets set to true and therefore the text
03:38
changes inside of there, let's click on that and there we go you can see copied is set to true, now that moves things around a little bit so I'm going to go ahead and set shrink to zero on here and we should not see that change, great, okay so we've copied the link that's great we know it's actually been copied to the clipboard this text has changed but after a few seconds we might want
04:00
to revert this back to the original, you don't have to do that but to do this we're going to go ahead and store a timeout, a javascript timeout inside of this component and then we're going to set a timeout inside of here, so we'll set the timeout to a set timeout in javascript and that timeout will run for however long you want, let's just say three seconds and then after three seconds
04:27
it's going to set copied back to false, so now what we can do is, well we don't really need to do anything that's it, so let's click copy link, wait a few seconds and after a few seconds that should go back to copy link, great, so that's working nicely, now the only problem with this and it's not a massive deal for here is if I click this and then just keep clicking it, what we're
04:47
going to end up with is some really weird functionality where it just the timeout is still there you can see what the when I click on this a couple of times and then click on it again the timeout reduces, that's just because we're running multiple timeouts, so what we can do is we can actually clear the timeout before we go ahead and set a new timeout, so when we click this clear it
05:08
out and then just set a new timeout, so now however many times I click on this it's always going to behave as we expect and once that goes back let's just click on it quickly and we always get that three second delay, okay that's it we have now implemented a very simple way to click to copy that to the clipboard with Alpine.

Episode summary

In this episode, we're making it super easy for users to copy a link with just one click! We walk through adding "click to copy" functionality for a link, so anyone can quickly grab and share it.

We use the Alpine Clipboard plugin, which is a lightweight JavaScript library for clipboard actions—think modern jQuery but much simpler and component-based. The episode kicks off by showing how to install this plugin via npm, pull it into your app.js, and register it with Alpine. Quick tip here: this only works when your site is running on HTTPS, so make sure your local setup uses it!

With the plugin ready, we turn our link section into an Alpine component, make a function to handle the copying, and tie it to a button's click event. To give users some feedback, we update the button text from "Copy link" to "Copied!" after a successful copy—and show how to make it revert back after a few seconds (using a timeout). We also cover why you should clear existing timeouts before setting a new one, so clicking repeatedly doesn't get weird.

By the end, you’ll have a slick copy-to-clipboard button that gives instant visual feedback and always behaves just right, no matter how many times you click it.

Episode discussion

No comments, yet. Be the first!