40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
interface ObfuscatedEmailProps {
|
|
email: string;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* A component that helps protect email addresses from simple spambots.
|
|
* It uses client-side mounting to render the actual email address,
|
|
* making it harder for static crawlers to harvest.
|
|
*/
|
|
export default function ObfuscatedEmail({ email, className = '', children }: ObfuscatedEmailProps) {
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
// Show a placeholder or obscured version during SSR
|
|
return (
|
|
<span className={className} aria-hidden="true">
|
|
{children || email.replace('@', ' [at] ').replace(/\./g, ' [dot] ')}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// Once mounted on the client, render the real mailto link
|
|
return (
|
|
<a href={`mailto:${email}`} className={className}>
|
|
{children || email}
|
|
</a>
|
|
);
|
|
}
|