react haiku

ตอบสนองไฮกุ

คอลเลกชันที่สะอาดและมีน้ำหนักเบาของ React Hooks & Utilities!

---

ลิงค์

• เอกสารอย่างเป็นทางการ

นี่คืออะไร?

ไฮกุเป็นไลบรารีตอบสนองที่เรียบง่ายและมีน้ำหนักเบาโดยมีเป้าหมายในการออม
คุณถึงเวลาด้วยการนำเสนอฮุคและยูทิลิตี้จำนวนมากที่จะ
ช่วยให้คุณทำงานได้เร็วขึ้นและมีประสิทธิภาพมากขึ้น!

ติดตั้ง

การติดตั้งไฮกุนั้นง่ายมาก!
ต้องมีปฏิกิริยา> = 16.8.0

NPM

npm install react-haiku

เส้นด้าย

yarn add react-haiku

PNPM

pnpm install react-haiku

การทดสอบหน่วยด้วย jest และ react testing library

โครงการนี้ใช้ JEST เป็นกรอบการทดสอบและการทดสอบ REACE Library (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 ; 

การบริจาค

ไฮกุเปิดรับการปรับปรุงและการมีส่วนร่วมเสมอคุณสามารถตรวจสอบปัญหาที่เปิดกว้างหากคุณต้องการมีส่วนร่วมและยังเป็นไปได้ที่จะขอเพิ่มการปรับปรุง/แนวคิดของคุณเองโดยใช้เทมเพลตคำขอคุณสมบัติ ก่อนที่จะมีส่วนร่วมโปรดอ่านคู่มือการบริจาคและตรวจสอบให้แน่ใจว่าได้เคารพมาตรฐาน! ขอบคุณที่สละเวลา!

เนื้อหาแพ็คเกจ

ตะขอ

• 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() - เรียกใช้ hook useeffect อย่างเคร่งครัดเพียงครั้งเดียวเมื่อมีการติดตั้งส่วนประกอบ!
• useTitle() - อัปเดตชื่อเอกสารจากส่วนประกอบของคุณ!
• useUpdateEffect() - คล้ายกับ USEEFFECT แต่มันข้ามการเรนเดอร์แรกของส่วนประกอบและตอบสนองต่อการอัปเดตที่เกิดขึ้นจากค่าการพึ่งพา

ระบบสาธารณูปโภค

• If - ส่วนประกอบสำหรับการเรนเดอร์แบบมีเงื่อนไขอย่างง่าย!
• Show - ส่วนประกอบสำหรับการเรนเดอร์แบบมีเงื่อนไขที่ซับซ้อน!
• For - ส่วนประกอบการเรนเดอร์แบบไดนามิกพร้อมการกำหนดคีย์อัตโนมัติ!
• RenderAfter - ส่วนประกอบที่ทำให้ลูก ๆ ของตนหลังจากการล่าช้าที่กำหนด
• Image - ส่วนประกอบที่ทำให้กระบวนการแสดงภาพง่ายขึ้น

ผู้ดูแล

David Haz

ใบอนุญาต

มิกซ์