react haiku
v2.1.8
Haiku هي مكتبة رد فعل بسيطة وخفيفة الوزن مع هدف الادخار
يمكنك الوقت من خلال تقديم مجموعة كبيرة من السنانير والمرافق التي ستحققها
تساعدك على إنجاز المهمة بشكل أسرع وأكثر كفاءة!
تثبيت Haiku سهل للغاية!
يتطلب React> = 16.8.0
npm install react-haikuyarn add react-haikupnpm install react-haikuيستخدم هذا المشروع Jest كإطار اختبار ومكتبة اختبار رد الفعل (RTL) لاختبار مكونات رد الفعل والخطافات.
لتنفيذ جميع اختبارات الوحدة مع تمكين التغطية
npm run test يرجى التحقق من الوثائق الرسمية للحصول على أمثلة الاستخدام الكاملة.
import { useHover } from 'react-haiku' ;
const Component = ( ) => {
const { hovered , ref } = useHover ( ) ;
return < p ref = { ref } > { hovered ? 'All mice on me' : 'No mice on me' } </ p > ;
} ;
export default Component ; import { For } from 'react-haiku' ;
const Component = ( ) => {
const list = [ { name : 'React' } , { name : 'Haiku' } ] ;
render (
< >
< For each = { list } render = { ( item , index ) => < p > { item . name } </ p > } />
</ > ,
) ;
} ;
export default Component ; Haiku مفتوح دائمًا للتحسينات والمساهمات ، يمكنك التحقق من المشكلات المفتوحة إذا كنت ترغب في المساهمة ، ومن الممكن أيضًا طلب إضافة تحسيناتك/أفكارك باستخدام قالب طلب الميزات. قبل المساهمة ، يرجى قراءة دليل المساهمة والتأكد من احترام المعايير! شكرا لك على وقتك!
useClipboard() - نسخ البيانات إلى حافظة المستخدم!useHover() - طريقة سريعة لاكتشاف ما إذا كان الماوس الخاص بك قد تجاوز عنصر!useInputValue() - إدارة حالة الإدخال مع هذا الخطاف البسيط!useLeaveDetection() - اكتشف عندما يترك مؤشر المستخدم الخاص بك الصفحة!useMediaQuery() - معالجة المكون الخاص بك باستخدام استعلامات الوسائط!useMousePosition() - اكتشف الموضع الحالي للماوس بالنسبة إلى الهدف أو المستند بأكمله!usePrefersTheme() - اكتشف موضوع النظام المفضل للمستخدم!useScript() - إرفاق علامات البرنامج النصي بالوثيقة من مكوناتك!useToggle() - تبديل قيم الحالة بين خيارين مختلفين!useBoolToggle() - تبديل قيم الحالة المنطقية!useUrgentUpdate() - القوة تجعل مكونًا عند استدعاء هذا الخطاف!useClickOutside() - اكتشف النقرات خارج عنصر مستهدف!useConfirmExit() - مطالبة المستخدم برسالة قبل إغلاق علامة التبويب إذا تم تعيين الحالة على أنها قذرة.useDebounce() - debounce تغييرات الدولة للرد على التحديثات بعد التأخير!useEventListener() - تعيين مستمعين الأحداث على كائن النافذة أو عنصر هدف محدد!useFavicon() - تحديث ديناميكي FAVICON من مكون ديناميكي من مكون!useFirstRender() - تحقق مما إذا كان المكون في أول عرض له!useHold() - التعامل مع الضغط الطويل على عنصر مستهدف وتنفيذ معالج بعد تأخير مجموعة!useIdle() - اكتشاف نشاط المستخدم/عدم النشاط على الصفحة بناءً على الأحداث!useIsomorphicLayoutEffect() - التبديل بين useEffect و uselayouteffect اعتمادًا على بيئة التنفيذ (متصفح SSR vs)!useLocalStorage() - إدارة قيم LocalStorage بشكل ديناميكيuseScrollPosition() - الوصول إلى موضع التمرير الحالي على الصفحة وتعديله برمجيًا.useSingleEffect() - قم بتشغيل خطاف UseEffect بشكل صارم مرة واحدة فقط عند تثبيت المكون!useTitle() - قم بتحديث عنوان المستند من مكوناتك!useUpdateEffect() - على غرار useeffect ، ولكنه يتخطى العرض الأول للمكون ، ويتفاعل فقط مع التحديثات الناتجة عن قيم التبعية.If - مكون لتقديم مشروط بسيط!Show - مكون لتقديم مشروط معقد!For - مكون التقديم الديناميكي مع تعيين المفتاح التلقائي!RenderAfter - المكون الذي يجعل أطفالها بعد تأخير محدد.Image - المكون الذي يبسط عملية تقديم الصور. ديفيد هاز
معهد ماساتشوستس للتكنولوجيا
