Custom hook: useClipboard

För ett tag sedan skrev jag ett blogginlägg om hur man får tillgång till klippbordet med navigator-API:t. Jag bestämde mig för att göra det till en custom hook för att det skulle bli superlätt att använda. Innan vi går in i koden – klicka på knappen för att läsa ditt klippbord:

Nothing to show...

Webbläsaren frågar om åtkomst till klippbordet första gången. När du har sagt ja ska du se ditt klippbordsinnehåll ovanför.

Här är hooken:

import { useState } from "react"

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

	const read = async () => {
		try {
			const value = await navigator.clipboard.readText()
			setClipboard(value.trim())
		} catch {
			setClipboard("Couldn't access clipboard...")
		}
	}

	return [clipboard, read] as const
}

Och så här enkelt är det att använda:

import { useClipboard } from "hooks/useClipboard"

const Clipboard = () => {
	const [clipboard, read] = useClipboard()

	return (
		<>
			<button onClick={read}>Visa klippbord</button>
			<p>{clipboard ?? "Inget att visa..."}</p>
		</>
	)
}

export default Clipboard

Läsningen av klippbordet sker on demand när användaren klickar på knappen. Det undviker permission-prompts vid sidladdning och matchar hur webbläsare vill att API:t ska användas – klippbordsläsningar är tänkta att vara knutna till en användarinteraktion.