Vad har jag kopierat?

Klicka på knappen för att se vad du har i klippbordet just nu:

You have copied:

You haven't copied anything…

Hur kunde du veta?!

Tack vare navigator-API:t. Jag gjorde det i React och TypeScript. Vi börjar med att skriva en funktion som kollar upp vad som finns i klippbordet just nu:

const read = async () => {
	try {
		const value = await navigator.clipboard.readText()
		setClipboard(value.trim())
	} catch {
		setClipboard("Kunde inte visa vad du har kopierat...")
	}
}

Vi använder trim() för att undvika att till exempel ett ensamt mellanslag visas, eftersom det ändå inte skulle synas. Vi sparar utfallet i state som vi så klart också måste definiera:

const [clipboard, setClipboard] = useState<string>()

Att läsa klippbordet sker via en användarinteraktion (knappklick). Det är det rekommenderade mönstret – webbläsare vill att klippbordsläsningar ska initieras av en explicit handling snarare än köras automatiskt.

return (
	<>
		<button onClick={read}>Visa vad jag kopierat</button>
		<p>Detta har du kopierat:</p>
		<p>{clipboard || "Du har inte kopierat något..."}</p>
	</>
)

Hela React-komponenten ser ut så här:

import { useState } from "react"

const Clipboard = () => {
	const [clipboard, setClipboard] = useState<string>()

	const read = async () => {
		try {
			const value = await navigator.clipboard.readText()
			setClipboard(value.trim())
		} catch {
			setClipboard("Kunde inte visa vad du har kopierat...")
		}
	}

	return (
		<>
			<button onClick={read}>Visa vad jag kopierat</button>
			<p>Detta har du kopierat:</p>
			<p>{clipboard || "Du har inte kopierat något..."}</p>
		</>
	)
}

export default Clipboard

Så om du någon gång undrar vad du har kopierat men vägrar att testa att klistra in någonstans kan du använda den här sidan i stället!