@hopsoft/copy-controller NPM

Copy Controller

Copies text from input and textarea elements to the clipboard.

Quick Start

yarn add @hopsoft/copy-controller

`app/javascript/controllers/index.js`

import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'
import CopyController from '@hopsoft/copy-controller'

const application = Application.start()
const context = require.context('./controllers', true, /\.js$/)
application.load(definitionsFromContext(context))
application.register('copy', CopyController)

`app/views/demos/copy.html.erb`

<div data-controller="copy" data-copy-content='Copied...' data-copy-duration='1'>
  <textarea data-target='copy.source'></textarea>
  <button type="button" data-target='copy.target' data-action='click->copy#copy'>Copy</button>
</div>

Usage

The root element is a container that holds holds all other elements and is configured by setting:

data-controller="copy"

Configuration

Attribute		Default	Description
`data-copy-content`	optional	"Copied..."	Content to show in the button after a copy has been performed
`data-copy-duration`	optional	2000	How many milliseconds to show the copied content in the button before reverting to the original content

Copied content can be disabled by setting data-copy-content="" or data-copy-duration="0"

Targets

Targets are child elements identified by setting:

data-target="copy.TARGET_NAME"

Name		Description
`source`	required	An input or textarea that holds the content to be copied
`trigger`	required	The button used to perform the copy

Actions

Actions are behaviors that can be triggered and are identified by setting:

data-action="copy#ACTION_NAME"

Name		Description
`copy`	required	Performs the copy action (typically defined on the `button` target)

stimulus

@infinitebrahmanuniverse/nolb-_hop @everything-registry/sub-chunk-401

0.0.5

4 years ago

0.0.4

4 years ago