return fontLoaded; ;
useEffect(() => // Check if Arabic font is supported const checkFont = async () => if ('fonts' in document) await document.fonts.ready; setFontLoaded(true);
const ArabicText = ( children, ...props ) => const fontLoaded = useArabicFont();
const styles = weight, lineHeight: lineHeight === 'normal' ? '1.5' : lineHeight ; Arabic Text.jsx
function ProductCard() return ( <div> <ArabicText> سعر المنتج: $49.99 </ArabicText> /* Renders as: سعر المنتج: ٤٩.٩٩ $ */ </div> );
export default ArabicText; A more robust implementation includes proper CSS and accessibility features:
export default ArabicText; /* components/ArabicText.css */ .arabic-text display: inline-block; font-family: 'Segoe UI', 'Tahoma', 'Noto Sans Arabic', 'Amiri', 'Droid Arabic Naskh', 'Traditional Arabic', sans-serif; unicode-bidi: embed; word-wrap: break-word; white-space: normal; return fontLoaded; ; useEffect(() => // Check if
return String(text).replace(/\d/g, (digit) => westernToEastern[digit]); ;
const weightMap = normal: '400', medium: '500', bold: '700' ;
return ( <span dir="rtl" lang="ar" style=styles className= arabic-text $className ...props > children </span> ); ; With this component, you're well on your way
/* For headings */ .arabic-text.heading font-weight: 700; letter-spacing: -0.01em;
1. Auto-detect and Format Numbers // Advanced ArabicText with number conversion const ArabicText = ( children, useArabicNumerals = true, ...props ) => const convertToArabicNumerals = (text) => const westernToEastern = '0': '٠', '1': '١', '2': '٢', '3': '٣', '4': '٤', '5': '٥', '6': '٦', '7': '٧', '8': '٨', '9': '٩' ;
Remember to test your implementation with actual Arabic text and consider the specific needs of your Arabic-speaking users. With this component, you're well on your way to building truly international React applications. Have you implemented an Arabic text component in your project? Share your experiences and customizations in the comments below!
// components/ArabicText.jsx import React from 'react'; const ArabicText = ( children, className, ...props ) => return ( <span dir="rtl" lang="ar" className= arabic-text $ ...props > children </span> ); ;
const sizeMap = small: '0.875rem', medium: '1rem', large: '1.25rem', xlarge: '1.5rem' ;