Comparing the copyToClipboard implementations in Shadcn-ui/ui and Codehike.
In this article, we will compare the Copy button code between Shadcn-ui/ui and Codehike .
copyToClipboard in Shadcn-ui/ui
The code snippet below is picked from shadcn-ui source code .
export async function copyToClipboardWithMeta(value: string, event?: Event) {
navigator.clipboard.writeText(value)
if (event) {
trackEvent(event)
}
}
I think ‘withMeta’ in the function name copyToClipboardWithMeta refers to the analytics recorded in the trackEvent function .
import va from "@vercel/analytics"
export function trackEvent(input: Event): void {
const event = eventSchema.parse(input)
if (event) {
va.track(event.name, event.properties)
}
}
copyToClipboard in Codehike
The code snippet below is picked from codehike source code .
function copyToClipboard(text: string) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text)
return
}
navigator.clipboard.writeText(text)
}
Codehike implements the copyToClipboard differently.
领英推荐
fallbackCopyTextToClipboard:
This below code snippet is picked from Codehike source code . This function is just under the copyToClipboard.
function fallbackCopyTextToClipboard(text: string) {
var textArea = document.createElement("textarea")
textArea.value = text
// Avoid scrolling to bottom
textArea.style.top = "0"
textArea.style.left = "0"
textArea.style.position = "fixed"
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
try {
var successful = document.execCommand("copy")
// var msg = successful ? "successful" : "unsuccessful"
// console.log("Fallback: Copying text command was " + msg)
} catch (err) {
// console.error("Fallback: Oops, unable to copy", err)
}
document.body.removeChild(textArea)
}
Conclusion:
If I were to implement a copyToClipboard functionality, I would also add a fallback in case the navigator.clipboard is not available in a given browser like in Codehike and if you also use Vercel analytics in your application, you might as well record your analytics like in shadcn-ui/ui.
About me:
Website: https://ramunarasinga.com/
Email: [email protected]
References: