Summarize this content to 400 words in Persian Lang
آیا تا به حال تمایل داشته اید که ورودی متن شما به طور خودکار بر اساس نوع تایپ کاربران تغییر جهت دهد؟ بیایید یک کامپوننت React بسازیم که زبان‌های راست به چپ (RTL) مانند عربی را در زمان واقعی تشخیص می‌دهد – فقط با چند خط TypeScript! بدون کتابخانه، بدون دردسر.
رمز جادویی 🪄
در اینجا تمام آنچه برای تغییر جهت فوری بر اساس ورودی نیاز دارید وجود دارد:
import { ChangeEvent, useState } from ‘react’;
const App = () => {
const [direction, setDirection] = useState<‘ltr’ | ‘rtl’>(‘ltr’);
const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
const text = event.target.value;
const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F]/;
setDirection(rtlRegex.test(text) ? ‘rtl’ : ‘ltr’);
};
return (
<textarea
dir={direction}
placeholder=”Type something…”
onChange={handleInputChange}
/>
);
};
export default App;
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
چگونه کار می کند 🔍
جادوی حالت: useState جهت را بر روی هر کدام تنظیم می کند ‘ltr’ یا ‘rtl’.
تشخیص RTL: ما از یک regex ساده برای تشخیص خط عربی استفاده می کنیم. اگر کاراکترهای RTL را پیدا کند، جهت به rtl تغییر می کند. در غیر این صورت، ltr باقی می ماند.
جهت پویا: این dir={direction} مشخصه روشن همانطور که شما تایپ می کنید به روز می شود و جلوه RTL فوری می دهد.
چرا این سنگ 🎉
سبک وزن: بدون نیاز به کتابخانه اضافیبازخورد فوری: تایپ کردن جهت را در حین حرکت تنظیم می کند.نوع ایمنی: TypeScript جهت را قفل نگه می دارد ‘ltr’ یا ‘rtl’ فقط
آن را امتحان کنید! فیلدهای ورودی شما هرگز یکسان نخواهند بود. 🚀🌍
آیا تا به حال تمایل داشته اید که ورودی متن شما به طور خودکار بر اساس نوع تایپ کاربران تغییر جهت دهد؟ بیایید یک کامپوننت React بسازیم که زبان‌های راست به چپ (RTL) مانند عربی را در زمان واقعی تشخیص می‌دهد – فقط با چند خط TypeScript! بدون کتابخانه، بدون دردسر.
رمز جادویی 🪄
در اینجا تمام آنچه برای تغییر جهت فوری بر اساس ورودی نیاز دارید وجود دارد:
import { ChangeEvent, useState } from 'react';
const App = () => {
const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr');
const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
const text = event.target.value;
const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F]/;
setDirection(rtlRegex.test(text) ? 'rtl' : 'ltr');
};
return (
<textarea
dir={direction}
placeholder="Type something..."
onChange={handleInputChange}
/>
);
};
export default App;
چگونه کار می کند 🔍
-
جادوی حالت: useState جهت را بر روی هر کدام تنظیم می کند
'ltr'یا'rtl'. - تشخیص RTL: ما از یک regex ساده برای تشخیص خط عربی استفاده می کنیم. اگر کاراکترهای RTL را پیدا کند، جهت به rtl تغییر می کند. در غیر این صورت، ltr باقی می ماند.
-
جهت پویا: این
dir={direction}مشخصه روشنهمانطور که شما تایپ می کنید به روز می شود و جلوه RTL فوری می دهد.
چرا این سنگ 🎉
سبک وزن: بدون نیاز به کتابخانه اضافی
بازخورد فوری: تایپ کردن جهت را در حین حرکت تنظیم می کند.
نوع ایمنی: TypeScript جهت را قفل نگه می دارد 'ltr' یا 'rtl' فقط
آن را امتحان کنید! فیلدهای ورودی شما هرگز یکسان نخواهند بود. 🚀🌍
