react haiku
v2.1.8
Haiku是一個簡單且輕巧的React庫，目的是保存
您通過提供大量掛鉤和公用事業的時間
幫助您更快，更有效地完成工作！
安裝haiku非常簡單！
需要React> = 16.8.0
npm install react-haikuyarn add react-haikupnpm install react-haiku該項目將開玩笑用作測試框架，並用來測試庫（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() - 如果狀態設置為Dirty，請在關閉選項卡之前提示用戶使用消息。useDebounce() - 延遲後，審閱狀態更改以對更新做出反應！useEventListener() - 在窗口對像或特定目標元素上設置事件偵聽器！useFavicon() - 從組件中動態更新網站的Favicon！useFirstRender() - 檢查組件是否在其第一個渲染上！useHold() - 處理目標元素上的長按下，並在設定延遲後執行處理程序！useIdle() - 根據事件在頁面上檢測用戶活動/不活動！useIsomorphicLayoutEffect() - 根據執行環境（SSR vs瀏覽器）在使用效果和USELAYOUTEFFECT之間切換！useLocalStorage() - 動態管理localstorage值useScrollPosition() - 訪問頁面上的當前滾動位置，並通過編程進行修改。useSingleEffect() - 安裝組件時僅嚴格地運行使用效果掛鉤！useTitle() - 從組件中更新文檔的標題！useUpdateEffect() - 類似於使用效果，但它跳過了組件的第一個渲染，並且僅對依賴關係值觸發的更新反應。If - 簡單條件渲染的組件！Show - 複雜條件渲染的組件！For - 具有自動鍵分配的動態渲染組件！RenderAfter組件在設定延遲後呈現其子女。Image - 簡化渲染圖像過程的組件。 大衛·哈茲（David Haz）
麻省理工學院
