@johnfreeman/stimulus-clipboard v1.0.3

Stimulus Clipboard

A Stimulus controller for copy-to-clipboard functionality. Unlike other takes on this, this one tries to get out of your way by dispatching a copied event when text is copied to the clipboard. This opens the door for calling an action on another controller.

• Installation
• Actions
  • copy
  • selectCopyable
• Targets
  • copyable
• Events
  • copied
• Special Thanks

Installation

npm install @johnfreeman/stimulus-clipboard 

import { Application } from "stimulus"
import Clipboard from "@johnfreeman/stimulus-clipboard "

const application = Application.start()
application.register("clipboard", Clipboard)

Actions

copy

<input
    data-controller="clipboard"
    data-action="click->clipboard#copy" />

selectCopyable

<input
    data-controller="clipboard"
    data-action="focus->clipboard#selectCopyable" />

Targets

copyable

If copyable isn't specified this.element is used.

<div data-controller="clipboard">
    <input
        data-action="focus->clipboard#selectCopyable"
        data-clipboard-target="copyable"/>
    <button data-action="click->clipboard#copy"/>
</div>

Events

copied

<input
    data-controller="clipboard"
    data-action="click->clipboard#copy clipboard:copied->tooltip#show" />

Special Thanks

🎉 Special thanks to the guys at Basecamp for creating Stimulus and also for making the controllers for Basecamp and Hey available for everyone to learn from.