Michilis/Spanglish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix: resolve ShareButtons hydration error by deferring native share check to client

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Michilis
2026-02-12 02:17:01 +00:00
parent 2b2f2cc4ed
commit 8315029091
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/ShareButtons.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { useLanguage } from '@/context/LanguageContext';
import {
ShareIcon,
@@ -18,6 +18,12 @@ interface ShareButtonsProps {
export default function ShareButtons({ title, url, description }: ShareButtonsProps) {
const { locale } = useLanguage();
const [copied, setCopied] = useState(false);
const [supportsNativeShare, setSupportsNativeShare] = useState(false);
// Check for native share support only after mount to avoid hydration mismatch
useEffect(() => {
setSupportsNativeShare(typeof navigator !== 'undefined' && typeof navigator.share === 'function');
}, []);
// Use provided URL or current page URL
const shareUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
@@ -133,7 +139,7 @@ export default function ShareButtons({ title, url, description }: ShareButtonsPr
</button>
{/* Native Share (mobile) */}
{typeof navigator !== 'undefined' && typeof navigator.share === 'function' && (
{supportsNativeShare && (
<button
onClick={handleNativeShare}
className="w-10 h-10 flex items-center justify-center rounded-full bg-primary-yellow text-primary-dark hover:bg-primary-yellow/90 transition-colors"