Arabic Text.jsx ⟶ [TOP-RATED]
export default ArabicText; A more robust implementation includes proper CSS and accessibility features:
return String(text).replace(/\d/g, (digit) => westernToEastern[digit]); ;
return ( <div dir=isRTL ? 'rtl' : 'ltr'> <ArabicText> t('welcome_message') </ArabicText> </div> );
return ( <span dir="rtl" lang="ar" style=styles className= arabic-text $className ...props > children </span> ); ; Arabic Text.jsx
const sizeMap = small: '0.875rem', medium: '1rem', large: '1.25rem', xlarge: '1.5rem' ;
return ( <span dir="rtl" lang="ar" ...props> formattedContent </span> ); ; const ArabicText = ( children, ...props ) => // Automatically handle mixed LTR/RTL content const wrappedChildren = React.Children.map(children, child => if (typeof child === 'string') // Wrap English/LTR segments in bdi tags const parts = child.split(/([a-zA-Z0-9\s]+)/); return parts.map((part, i) => if (/[a-zA-Z]/.test(part)) return <bdi key=i>part</bdi>; return part; ); return child; ); return ( <span dir="rtl" lang="ar" ...props> wrappedChildren </span> ); ; 3. With Font Optimization Hook import React, useEffect, useState from 'react'; const useArabicFont = () => const [fontLoaded, setFontLoaded] = useState(false);
// components/ArabicText.jsx import React from 'react'; const ArabicText = ( children, className, ...props ) => return ( <span dir="rtl" lang="ar" className= arabic-text $className ...props > children </span> ); ; Auto-detect and Format Numbers // Advanced ArabicText with
const weightMap = normal: '400', medium: '500', bold: '700' ;
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': '٩' ;
return ( <span dir="rtl" lang="ar" style= opacity: fontLoaded ? 1 : 0.99 ...props > children </span> ); ; Basic Usage import ArabicText from './components/ArabicText'; function App() return ( <div> <ArabicText>مرحبا بالعالم</ArabicText> <ArabicText size="large" weight="bold"> عنوان رئيسي </ArabicText> </div> ); Have you implemented an Arabic text component in
// components/ArabicText.jsx import React from 'react'; import './ArabicText.css'; const ArabicText = ( children, size = 'medium', weight = 'normal', lineHeight = 'normal', className = '', ...props ) =>
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!
.