Copy to Clipboard

In this article, we will make a feature that copies the users email into clipboard. This kind of feature makes it easier for user to share their information.

Clipboard Controller

Let’s start with creating clipboard_controller.js and add an empty method copy in it.

// app/javascript/controllers/clipboard_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  copy() {
  }
}

Then go to our posts index view and add data-controller="clipboard" to the outer <td> of our email display. Any time this attribute appears on an element, Stimulus will connect an instance of our controller.

<!-- app/views/posts/index.html.erb -->

<!-- ...  -->
      <td><%= post.title %></td>
      <td><%= post.content %></td>
      <td><%= post.categories.pluck(:name).join(',') %></td>
-     <td><%= post.user&.email %></td>
+     <td data-controller="clipboard">
+       <span><%= post.user&.email %></span>
+     </td>
      <td><%= post.comments_count %></td>
<!-- ...  -->

Email Target

We also need to set a reference to the <span> so we can get its contents. Include the data-clipboard-target="email" attribute in the email <span>.

<!-- app/views/posts/index.html.erb -->

<!-- ...  -->
      <td data-controller="clipboard">
-       <span><%= post.user&.email %></span>
+       <span data-clipboard-target="email"><%= post.user&.email %></span>
      </td>
<!-- ...  -->

Now, in the clipboard controller, add a target definition so that we can access the text field element as this.emailTarget.

// app/javascript/controllers/clipboard_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
+ static targets = ["email"]
    
  copy() {
  }
}

More information about targets may be found in the reference documentation.

Copy Button

Beside the email <span>, we’ll add a button with data-action="clipboard#copy" to call the copy() method of our clipboard.

<!-- app/views/posts/index.html.erb -->

<!-- ...  -->
      <td data-controller="clipboard">
        <span data-clipboard-target="email"><%= post.user&.email %></span>
+       <button data-action="click->clipboard#copy">copy</button>
      </td>
<!-- ...  -->

Copy Action

Setup our copy() method, we can choose the contents of the input field and call the clipboard. Additionally, we will make a notice that the email has been copied to notify us.

// app/javascript/controllers/clipboard_controller.js

import {Controller} from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["email"]

  copy() {
+   navigator.clipboard.writeText(this.emailTarget.textContent);
+   document.getElementsByClassName("notice")[0].innerText = 'copy email: ' + this.emailTarget.textContent
  }
}

Import Clipboard

Finally, we must load and register clipboard controller to our application. Import the ClipboardController, then call the Application#register method.

// app/javascript/controllers/clipboard_controller.js

// ...
+ import ClipboardController from "./clipboard_controller";
+ application.register("clipboard", ClipboardController)

Go to posts page and try out the copy feature.

You have now successfully used Stimulus JS to develop the Copy to Clipboard functionality.