Electron Fundamentals, v2 Electron Fundamentals, v2

Reading & Writing to the System Clipboard

Check out a free preview of the full Electron Fundamentals, v2 course:
The "Reading & Writing to the System Clipboard" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve adds functionality to the app that allows the user to add items from the system clipboard, and copy items to the system clipboard.

Get Unlimited Access Now

Transcript from the "Reading & Writing to the System Clipboard" Lesson

[00:00:00]
>> Steve Kinney: So now, what we can do is, we can go ahead and we can modify ad clipping to actually read from the clipboard. So, we have the clippings, we'll say content = clipboard.readText.
>> Steve Kinney: What do you think readText does?
>> Steve Kinney: Not all at once. [LAUGH] Read text in the clipboard, right?

[00:00:29] And we'll do,
>> Steve Kinney: We'll cheat.
>> Steve Kinney: We'll use this Date.now, which will give us a unique-ish number. And then we'll say const clipping is that id and that content. Now, instead of this,
>> Steve Kinney: We'll go ahead, we've got that built one in there, and then get whatever the last thing I copied, as you can see, it was clearly that.

[00:01:05] I'll go ahead and let's grab this little helpful error message, and copy it. And I'm reading from the clipboard, and immediately adding it to the application state, right? So all of the sudden, we're most of the way there. Pretty quickly, just read whatever is on the clipboard, and add it in there.

[00:01:21] The other trick, of course, would be to write stuff back to the clipboard. This is cool if you wanna save stuff from your clipboard for posterity. The other thing that we're probably going to want to do is go ahead and write it back to the clipboard.
>> Steve Kinney: So we're gonna give ourselves, that one can have everything it needs passed in.

[00:01:45] So we'll say const writeToClipboard, which will take some kind of content. And we'll call clipboard.writeText, and you can see, there's all sorts of stuff that I could write. Do HTML, write rich text, so on and so forth. We're gonna keep it simple. I'm going to write that content back to the clipboard, which means that now we have that clipboard button in my clipping component.

[00:02:20] I could say something like,
>> Steve Kinney: Pass in an arrow function of,
>> Steve Kinney: writeToClipboard with that content.
>> Steve Kinney: All right, let's try it out.
>> Steve Kinney: Now you can see, this application has a problem right now where it loses everything, other than what I hard-coded in, every time I refresh.

[00:02:53] That's not great user experience, we'll fix that with a database later. Let's go ahead and just copy this, let's paste it.
>> Steve Kinney: So then I can go ahead and grab this over here. Copy it in, paste the wall, put this back on the clipboard, paste the whole thing.