我很喜歡在 NPM 目錄到處逛、尋找優質小套件。今天跟你分享五個我的近期發現！
- 原文出處：https://dev.to/naubit/5-small-and-hidden-react-libraries-you-should-already-be-using-nb5
1. Urlcat
Urlcat 是一個小型的 Javascript 套件，可以非常方便地建立 URL、預防常見錯誤。
你當然可以直接用 URL API 來建立網址，但這種做法需要你手動處理一些細節。
Urlcat 就方便多了，隨插即用，不用花一堆時間讀文件，就能直接開始用。
https://github.com/balazsbotond/urlcat
2. UseHooks-ts
如果你是 React 開發者、有在用 hook，很多時候你需要替一大堆小東西寫 custom hook。像是處理深色模式、處理視窗大小變化事件，等等。
UseHooks 是一個小套件，針對各種小案例都有現成的 hook，而且文件齊全、支援 TypeScript。
https://github.com/juliencrn/usehooks-ts
3. Logt
我喜歡到處都有日誌，當需要知道發生了什麼時，就可以檢查。
當我寫前端時，我也想要那些日誌。但有一些先決條件：
- 必須有完整的型別（這樣我就可以在 Typescript 中方便使用）
- 必須很小
- 必須有彩色標籤（所以我很快就知道日誌類型）
- 必須有分日誌級別
- 必須有一些方法，可以根據條件隱藏一些日誌（比如是否在正式環境）
- 必須可以將這些日誌發送到其他地方（比如 Sentry）
經過大量時間研究（我都快自己開始寫了）我找到了 Logt，它滿足我的所有要求。
100% 推薦！
https://github.com/sidhantpanda/logt
4. Loadable Components
如果你正在嘗試優化 React 應用程式，你可能正在使用 React.lazy 和 Suspense 來延遲載入元件。
雖然也是可以，但還有更好的方法！比如這個套件。我無法在此完整說明原因，但請參考以下比較： https://loadable-components.com/docs/loadable-vs-react-lazy/
基本上，它支持 SSR（Server Side Rendering）、Library Splitting，甚至 完全動態導入。還不錯吧？
此外，它真的很容易使用。幾乎即插即用。所以，試試吧！
https://github.com/gregberge/loadable-components
5. Emoji Mart
在處理不同的專案時，我總是要處理表情符號。現在到處都在使用它。而且我通常必須在專案中添加一些表情符號選擇器元件。
這還不算難。但是隨後開始收到更多要求：它必須延遲載入表情符號，它必須支持國際化，它必須允許搜尋，它必須允許使用與 slack 相同的查詢縮寫…
這些是可以做，但還是花時間在專案本身比較好吧。
所以，來使用 Emoji Mart 吧！
https://github.com/missive/emoji-mart
以上是五個好用但是還不知名的小套件，希望你喜歡！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
