Base on clipboard api. A simple and efficient web component that allows users to copy text to the clipboard. Built with TypeScript and bundled using Rollup.
- Easy to Use: Just include the component in your HTML and use it.
- Lightweight: Minimal footprint and dependencies.
- Customizable: Easy to extend and modify.
You can install the component via npm:
npm install next-copyOr you can include the bundled script directly in your HTML:
<script src="dist/bundle.js"></script>Here is how you can use the web component in your HTML file:
Using content attribute to assign the text to be copied.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next Copy Example</title>
</head>
<body>
<next-copy content="This is a need copy text">
</next-copy>
<script src="../dist/bundle.js"></script> <!-- Use the path to your bundled script -->
<script>
(function() {
const nextCopy = document.querySelector('next-copy');
nextCopy.addEventListener('onSuccess', (event) => {
alert(event.detail.message);
});
nextCopy.addEventListener('onError', (event) => {
alert(event.detail.message);
});
})();
</script>
</body>
</html>Using slot to assign the text to be copied.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next Copy Example</title>
</head>
<body>
<next-copy>
<span slot="text">This is a need copy text</span>
<button slot="copy">Your Copy Button</button>
</next-copy>
<script src="../dist/bundle.js"></script> <!-- Use the path to your bundled script -->
<script>
(function() {
const nextCopy = document.querySelector('next-copy');
nextCopy.addEventListener('onSuccess', (event) => {
alert(event.detail.message);
});
nextCopy.addEventListener('onError', (event) => {
alert(event.detail.message);
});
})();
</script>
</body>
</html>If you are using a module bundler like Webpack or Rollup, you can import and use the component like this:
import 'next-copy';
// Now you can use <next-copy> in your HTMLRefer To: Can I Use
This project is licensed under the MIT License - see the LICENSE file for details.
- Thanks to the open-source community for various tools and libraries.
- Inspired by various web component tutorials and examples.