Giter VIP home page Giter VIP logo

clipboard-copy's Introduction

clipboard-copy travis npm downloads size javascript style guide

Lightweight copy to clipboard for the web

The goal of this package is to offer simple copy-to-clipboard functionality in modern web browsers using the fewest bytes. To do so, this package only supports modern browsers. No fallback using Adobe Flash, no hacks. Just 30 lines of code.

Unlike other implementations, text copied with clipboard-copy is clean and unstyled. Copied text will not inherit HTML/CSS styling like the page's background color.

Supported browsers: Chrome, Firefox, Edge, Safari.

Works in the browser with browserify!

install

npm install clipboard-copy

usage

const copy = require('clipboard-copy')

button.addEventListener('click', function () {
  copy('This is some cool text')
})

API

successPromise = copy(text)

Copy the given text to the user's clipboard. Returns successPromise, a promise that resolves if the copy was successful and rejects if the copy failed.

Note: in most browsers, copying to the clipboard is only allowed if copy() is triggered in direct response to a user gesture like a 'click' or a 'keypress'.

comparison to alternatives

testing

Testing this module is currently a manual process. Open test.html in your web browser and follow the short instructions. The web page will always load the latest version of the module, no bundling is necessary.

license

MIT. Copyright (c) Feross Aboukhadijeh.

clipboard-copy's People

Contributors

bfred-it avatar feross avatar linusu avatar oliviertassinari avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

clipboard-copy's Issues

Change README to a Promise

The README currently says:

Returns success, a boolean which indicates if the copy was successful.

But the code actually returns a promise that resolves if the copy was successful.

Thanks for this

Just that. Thanks. Very useful and simple module without all the unneeded overload present in other alternatives.

Publishing 1.3.0

Hi @feross,

Would you mind adding me on npm as well, or publish the v1.3.0 tag for me?

Thanks 🍻

Paste support?

Hey,

This package is super useful, it's simple and does it job. Do you plan or can you add paste support? Could be a separate package if you want to keep this low in file size :)

Thanks

Typescript definition issue

I'm getting a TS error about: Cannot invoke an expression whose type lacks a call signature.

From what I found out, using the following typedef locally works fine:

declare module 'clipboard-copy' {
  function clipboardCopy (text: string): Promise<void>
  export default clipboardCopy
}

I'm on Typescript 3.2.

v4 breaks IE11 compatibility

The update to v4 breaks IE11 compatibility because it does not like async syntax.
Not sure if this lib is still supposed to support IE11, but if not it would be helpful to have a changelog which mentions breaking changes.

Doesn't work on Fb Messenger/Instagram in-app browser on Android device

So i tried it in dev and it worked great. Worked fine if I was using iOS device. Works fine if it's google chrome and NOT an in-app browser. On Android though, I opened the webpage of my angular 7 app using fb messenger, so it opened using facebook's in-app browser and when I trigger the copy function it caught the below error:

NotAllowedError: Write permission denied.

Not sure if this falls in your domain but thought I should mention it. I'm a beginner programmer so please let me know which details need to be provided.

My typescript code:

getShareLink() {
    
    copy(this.inviteUrl)
      .then(data => {
     
        this.successMessage = data;
       
        return this.toastr.success('Link copied to clipboard');
      }).catch(err => {
        this.failMessage = err;
        console.log(err);
    });
  }

this.failMessage on the front end was NotAllowedError: Write permission denied.

Not working inside cross-domain iframe

Hello,

Thanks for this nice package.

It seems like the copy doesn't work when the page is loaded into a cross-domain iframe, although the promise returns success. Tested in all major desktop/mobile browsers.

Transpile to es5 to support older devices

Let's provide a transpiled to es5 version of this lib. We can do it before publish on npm for example.
Currently this lib is not usable for devices not supporting some of es6+ syntax like async/await, Promise, const etc.

Source for empty promise rejection?

I think this got lost under the outdated diff, so reposting here just to be sure:

I was matching the browser API. Even if I reject with an error here, the user can't rely on that, since if the Async Clipboard API is used then it may reject without an error. I thought it was better to be consistent. Will add a comment.

Aha, interesting... I wonder why they would standardize around that 🤔

Do you have a link where I can read about this? I tried searching but to me, it didn't seem like the spec mentioned what the Promise should be rejected with.

In the chrome examples it seems like they reject with a proper error:

navigator.clipboard.writeText('Text to be copied')
  .then(() => {
    console.log('Text copied to clipboard');
  })
  .catch(err => {
    // This can happen if the user denies clipboard permissions:
    console.error('Could not copy text: ', err);
  });

ref: https://developers.google.com/web/updates/2018/03/clipboardapi#copy_writing_text_to_the_clipboard

ping @feross

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.