Arabic Text.jsx Apr 2026

const styles = weight, lineHeight: lineHeight === 'normal' ? '1.5' : lineHeight ;

/* For headings */ .arabic-text.heading font-weight: 700; letter-spacing: -0.01em; Arabic Text.jsx

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> ); const styles = weight, lineHeight: lineHeight === 'normal'

const formattedContent = useArabicNumerals ? convertToArabicNumerals(children) : children; const styles = weight

function ProductCard() return ( <div> <ArabicText> سعر المنتج: $49.99 </ArabicText> /* Renders as: سعر المنتج: ٤٩.٩٩ $ */ </div> );

export default ArabicText; A more robust implementation includes proper CSS and accessibility features: