In this lesson, let's take a look at another composable called useClipboard. Once again, you should start with the boilerplate code in StackBlitz, linked in the description below. First, you'll see that I've already imported useClipboard. In order to use it, we'll need to call the composable and then pass it a source option.
Source should be set to a reactive reference that holds the text that we desire to copy. In our case, this text a copy variable that I've already created. Now useClipboard returns an object that contains several useful properties and methods. We can use object destructuring to access the ones that we need.
To begin with, let's just get the copy function that triggers the actual copying. Now we can bind the copy function to the click event of the copy button and test things out. Just like before, we'll want to open our application preview in its own tab, just because there's a permission issue with using this copy functionality within an iframe. After I click copy, I can paste the contents of my clipboard into the editor.
And sure enough, the contents of my clipboard say hello, just like what's stored in our text-to-copy variable. Alright, let's try updating the input and copying and pasting again. Awesome! the clipboard contents are updated.
One thing that I want you to notice when I called copy on the click event is that I did provide the parentheses. That's because if an argument is passed to copy, it will use that value as the source instead of the source from the used clipboard config object. In this case, that'd be the pointer event itself. That's obviously not what we want, so I'll just change it back.
Great. Now the core functionality is up and going. But let's improve the user experience a little bit by providing some feedback when the copy is successful. We can do that by getting the copied property from the Use Clipboard Composable.
Now, on the button, if copied is true, we can set the label to copied. Otherwise, it'll be copy. This time, after I click the copy button, the text changes to copied. and after one and a half seconds it reverts back to copy.
If you'd like to modify how long copied is true, then you can pass the copy during option to use clipboard, passing it how long you want it to last in milliseconds. This time the button says copied for three seconds instead of one and a half. Alright, another approach to using the copy function would be to leave off the source option. when we call useClipboard, and then provide the string to copy directly to the copy function.
Now, the text copied to the clipboard is available via a text property on the destructure return. Let's just print that out in the template so that we can see the result. Nice. Lastly, we can get the isSupported boolean from useClipboard in order to check for browser support.
In this lesson, let's take a look at another composable called useClipboard. Once again, you should start with the boilerplate code in StackBlitz, linked in the description below. First, you'll see that I've already imported useClipboard. In order to use it, we'll need to call the composable and then pass it a source option.
Source should be set to a reactive reference that holds the text that we desire to copy. In our case, this text a copy variable that I've already created. Now useClipboard returns an object that contains several useful properties and methods. We can use object destructuring to access the ones that we need.
To begin with, let's just get the copy function that triggers the actual copying. Now we can bind the copy function to the click event of the copy button and test things out. Just like before, we'll want to open our application preview in its own tab, just because there's a permission issue with using this copy functionality within an iframe. After I click copy, I can paste the contents of my clipboard into the editor.
And sure enough, the contents of my clipboard say hello, just like what's stored in our text-to-copy variable. Alright, let's try updating the input and copying and pasting again. Awesome! the clipboard contents are updated.
One thing that I want you to notice when I called copy on the click event is that I did provide the parentheses. That's because if an argument is passed to copy, it will use that value as the source instead of the source from the used clipboard config object. In this case, that'd be the pointer event itself. That's obviously not what we want, so I'll just change it back.
Great. Now the core functionality is up and going. But let's improve the user experience a little bit by providing some feedback when the copy is successful. We can do that by getting the copied property from the Use Clipboard Composable.
Now, on the button, if copied is true, we can set the label to copied. Otherwise, it'll be copy. This time, after I click the copy button, the text changes to copied. and after one and a half seconds it reverts back to copy.
If you'd like to modify how long copied is true, then you can pass the copy during option to use clipboard, passing it how long you want it to last in milliseconds. This time the button says copied for three seconds instead of one and a half. Alright, another approach to using the copy function would be to leave off the source option. when we call useClipboard, and then provide the string to copy directly to the copy function.
Now, the text copied to the clipboard is available via a text property on the destructure return. Let's just print that out in the template so that we can see the result. Nice. Lastly, we can get the isSupported boolean from useClipboard in order to check for browser support.