(function(){ let canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), w = canvas.width = innerWidth, h = canvas.height = innerHeight, particles = [], properties = { bgColor : 'rgba(17, 17, 19, 1)', particleColor : 'rgba(255, 40, 40, 1)', particleRadius : 3, particleCount : 60, particleMaxVelocity : 0.5, lineLength : 150, particleLife : 6, }; document.querySelector('body').appendChild(canvas); window.onresize = function() { w = canvas.width = innerWidth; h = canvas.height = innerHeight; } class Particle { constructor() { this.x = Math.random()*w;

Home PostsCopy text to clipboard

Copy text to clipboard

To copy text to the clipboard, use navigator.clipboard.writeText("some text").

JavaScript

1navigator?.clipboard
2	.writeText(text)
3	.then(() => {
4		//some action
5	})
6	.catch((err) => console.error(`Error copying text:`, err));

Below is an example of a copy button component for React:

JavaScript

1import { useState } from "react";
2
3const CopyButton = ({ text }) => {
4	const [copied, setCopied] = useState(false);
5
6	const copy = () => {
7		navigator?.clipboard
8			.writeText(text)
9			.then(() => {
10				setCopied(true);
11				setTimeout(() => setCopied(false), 2000);
12			})
13			.catch((err) => console.error(`Error copying text:`, err));
14	};
15
16	return (
17		<button
18			onClick={copy}
19		>
20			{copied ? (
21				<span>Copied</span>
22			) : (
23				<span>Copy</span>
24			)}
25		</button>
26	);
27};
28
29export default CopyButton;