iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

React Hook 不求人,建立自己的 Hook Libary 系列

建立自己的 React Hook Libary !
不想起手又是useState,不想又再寫一樣的handler,不想換專案發現怎麼沒有這個hook又要再整理,利用三十天解決自己的開發苦惱!

鐵人鍊成 | 共 30 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文 團隊桌遊玩樂團
DAY 21

[DAY 21] 不要再掐指算時辰啦!與時間套件一起準備當時空旅人吧!

沒錯!接下來要跟套件們合作嚕! 算時間一直都是麻煩事,簡單移動個一天兩天還可以,但一下要算時差,一下要算隔幾天,然後又要拆格式...然後就迷失在時間的洪流(?...

2022-10-04 ‧ 由 Charlie 分享
DAY 22

[DAY 22] 自己的 Hook 自己做! useDate 來操控日期吧!

繼承前篇,本篇就要來實作 useDate! 日期,不是約會 DEMO 在這裡 情境 許多後台或是查詢資料的介面上,都會常用到搜尋日期的功能,雖然並不是什麼特別...

2022-10-05 ‧ 由 Charlie 分享
DAY 23

[DAY 23] 自己的 Hook 自己做! useDates 兩個時間恰恰好

承繼上篇,useDate 變兩個就成了 useDates :) DEMO 在這裡 情境 除了用一個 useDate 之外,有時候需要兩個關聯的時間(區間)來提...

2022-10-06 ‧ 由 Charlie 分享
DAY 24

[DAY 24] 自己的Hook自己做!useImage 來預覽圖片吧!

今天的主題很單純,就是單純上傳圖片,不論是只有一個頁面或是多個功能都要用到,製造一個 hook 是很不虧的選擇,因為也是懶得再寫一次 (¬_¬) DEMO 底家...

2022-10-07 ‧ 由 Charlie 分享
DAY 25

[DAY 25] 自己的Hook自己做!html2canvas 來擷圖網頁的內容吧!

你一定在想截圖有甚麼好弄一篇文章的 DEMO 在這裡 情境 前陣子有遇到一個特別的需求,希望原本的訂單紀錄的呈現,也可以讓使用者擷取下來保存或是處理後續工作,...

2022-10-08 ‧ 由 Charlie 分享
DAY 26

[DAY 26] 自己的Hook自己做! 用 IntersectionObserver 弄出動態的網站吧!

DEMO 在這裡 情境 面對長長的列表與龐大的資料時,為了避免使用者感受到卡卡,你可能會希望等使用者滾動到該卡片時再進行資料的抓取;或是你想依照元素呈現的比例...

2022-10-09 ‧ 由 Charlie 分享
DAY 27

[DAY 27] 自己的Hook自己做!一些零碎的 hook 們

雖然能把一些複雜的邏輯通通整理起來很舒服,但有時候你只是想省一滴滴的麻煩,或是想圖一點乾淨或是清楚的程式碼,因此本篇要來看看這些可能只是弄弄命名、重新包裝,或...

2022-10-10 ‧ 由 Charlie 分享
DAY 28

[DAY 28] 自己的Hook自己測試!

雖然寫了那麼多,不論是有用的,或沒用的,要怎麼確保有沒有寫好呢? 當然就是就在講測試,雖然開發過程中可以測試功能正不正常,但隨著日後長大的需求有時難以回頭一一...

2022-10-11 ‧ 由 Charlie 分享
DAY 29

[DAY 29] 自己的Hook自己發佈!

除了測試之外,那當然就是發佈啦! 呼喚我最一開始的需求,就是希望能夠建立自己的 library 然後來使用,本篇計畫用 npm 來發佈。 同一隊的丹尼有寫了...

2022-10-12 ‧ 由 Charlie 分享
DAY 30

[DAY 30]自己的鐵人終於寫完了,剩下打包那件事

應該是要先講打包,再來講怎麼發佈套件的,不過沒關係,最後一天來看看打包吧! 開始! 拿 rollup.js 來幫我們協助打包,先來安裝 npm instal...

2022-10-13 ‧ 由 Charlie 分享