COPYTO-CLIPBOARD

A simple web component that allows you to copy text easily

📦 Installation

You can install copyto-clipboard using npm, yarn, or pnpm:

# Using npm
npm install @mindemangou/copyto-clipboard

# Using yarn
yarn add @mindemangou/copyto-clipboard

# Using pnpm
pnpm add @mindemangou/copyto-clipboard

Import the package

import '@mindemangou/copyto-clipboard'

OR

<script type="module" src="./node_modules/@mindemangou/copyto-clipboard" defer></script>

Example of use:

<copyto-clipboard>

      <button>click me 📄</button>

      <template> 
        <!-- Add text to copy here -->
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Dignissimos reiciendis
      </template>  
     
</copyto-clipboard>

If you want to insert an HTML tag use "<" for the sign < and ">" for the sign >

<copyto-clipboard>

    <button>click me 📄</button>

    <template> 
        <!-- ❌ -->
        <div>hello</div> // Resultat after pasting the text: hello 

        <!-- ✅ -->
        &lt;div&gt;hello&lt;/div&gt; //Resultat after pasting the text: <div>hello</div> 
    </template>
    
</copyto-clipboard> 

Use target attribute if you want to copy the contents of a DOM element

 <div id='template' >
   <span>John Doe</span>
 </div>

 <copyto-clipboard  target='#template'>
   <button>click me 📄</button>
 </copyto-clipboard>

 <!-- Output -->
  John Doe

You can use the trim attribute to remove leading and trailing whitespace from the copied text

<copyto-clipboard trim>

      <button>click me 📄</button>

      <template> 
       
         
        Dignissimos reiciendis


      </template>  
     
</copyto-clipboard>

Use the disable attribute to prevent copying

<!-- copy not work -->
<copyto-clipboard disabled>
      <button>click me 📄</button>

      <template> </template>  
</copyto-clipboard>

A data-copy attribute is set to the custom elements copyto-clipboard if the copy is successful

  <copyto-clipboard>

      <button id="copyToClipboard" >copy to clipboard</button>

      <button id="copied" >copied</button>

      <template> 

        #content {
          display: flex;
        }
        
        div > div {
          border: 3px solid rgb(0 0 0 / 20%);
        }
        
        .small {
          flex-grow: 1;
        }
        
        .double {
          flex-grow: 2;
          border: 3px solid rgb(0 0 0 / 20%);
        }
        
      </template>  
  </copyto-clipboard> 

copyto-clipboard #copied,copyto-clipboard[data-copy] #copyToClipboard  {
  display: none;
}

copyto-clipboard[data-copy] #copied {
  display: block;
}

You can also listen to the javascript copytoclipboard:copy event to detect whether the copy was successful

  const copyToClipboard=document.querySelector('copyto-clipboard')

  copyToClipboard.addEventListener('copytoclipboard:copy',()=> {
          alert('COPIED')
      })

Development

Clone the repo and install dependencies:

git clone https://github.com/mindemangou/CopyToClipboard.git
cd CopyToClipboard
pnpm install

Run in development mode:

pnpm run dev

Run tests:

pnpm run test

💡 Feel free to contribute! If you have any ideas or issues, open an issue or submit a PR. 🚀