Trước khi phát hành React Hook, người dùng sử dụng functional components sẽ cảm giác bị giới hạn tương đối nhiều. Người dùng sẽ khó thao tác được với state, context API hoặc lifecycle method.
Tuy nhiên bắt đàu từ React 16.8, React hook được ra đời và chúng ta đã có công cụ rất linh hoạt để sử dụng lại những đoạn code đã có sẵn.
Bài viết này mình sẽ giới thiệu một số React hook hữu dụng để có thể giải quyết được các bài toán gặp phải ngằng ngày.
useFiler Hook
Mình rất thích sử dụng useFiler
vè nó cho phép chúng ta tạo một hệ thống lưu trữ file ảo (virtual file system) ngay trên trình duyệt web. Về cơ bản thì nó dử dụng local storage để quản lý các file và nội dung của chúng.
Để sử dụng chúng ta cần cài đặt crooks package trong ứng dụng:
1 2 | npm install crooks --save |
Sau đó import useFiler hook từ crooks:
1 2 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useFiler <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'crooks'</span> |
Bây giờ chúng ta đã cso thể khởi tạo hook và quản lý file dễ dàng, đây là ví dụ:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>files<span class="token punctuation">,</span> <span class="token punctuation">{</span>add<span class="token punctuation">,</span> remove<span class="token punctuation">,</span> update<span class="token punctuation">,</span> clear<span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useFiler</span><span class="token punctuation">(</span><span class="token string">"localStorageItem"</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span>My Project<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Như bạn có thể thấy trong đoạn code trên, chúng ta có thể sử dụng các hàm add()
, remove()
, update()
,clear()
. Hãy cùng tìm hiểu xem cách sử dụng chúng thế nào nhé.
Add file
Hàm add() chấp nhận 1 tham số truyền vào, ở đây chúng ta cần truyền vào JSON-serializable:
1 2 | <span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"Save this JSON-serializable data in the file."</span><span class="token punctuation">)</span> |
Chú ý: hàm này sẽ tự động sinh ra 1 ID mới cho file vừa tạo, tuy nhiên chúng ta có thể custom ID bằng các truyền vào một integer hoặc một string ở tham số thứ 2.
Update file
Hàm update() yêu cầu 2 tham số, tham số đầu tiên là ID của file, tham số thứ 2 là là dữ liệu mới cần truyền vào:
1 2 | <span class="token function">update</span><span class="token punctuation">(</span><span class="token string">"abc1234"</span><span class="token punctuation">,</span> <span class="token string">"New content of file."</span><span class="token punctuation">)</span> |
Remove file
Truyền ID cùa file vào trong hàm remove() để xoá
1 2 | <span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">"abc1234"</span><span class="token punctuation">)</span> |
Clear all files
Gọi hàm clear() để xoá toàn bộ files:
1 2 | <span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
useFetch Hook
useFetch có thể sử dụng để lấy dữ liệu từ API. Sau khi request được thực hiện xong, nó sẽ trả về response hoặc errors(nếu có).
Import vào trong project:
1 2 | <span class="token keyword">import</span> useFetch <span class="token keyword">from</span> <span class="token string">"hooks/useFetch"</span><span class="token punctuation">;</span> |
Tạo thử 1 request:
1 2 | <span class="token keyword">const</span> <span class="token punctuation">{</span> response<span class="token punctuation">,</span> errors <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useFetch</span><span class="token punctuation">(</span><span class="token string">"https://api.github.com/users/hct97/repos"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
useHover Hook
Về cơ bản, nó theo dõi con trỏ chuột trên màn hình để phát hiện xem nó có được đặt trên một phần tử cụ thể hay không. Nếu có, nó sẽ trigger the hovered event,
Import vào trong project:
1 2 | <span class="token keyword">import</span> useHover <span class="token keyword">from</span> <span class="token string">"hooks/useHover"</span><span class="token punctuation">;</span> |
Khởi tạo:
1 2 | <span class="token keyword">const</span> <span class="token punctuation">[</span>hoverMe<span class="token punctuation">,</span> isHovered<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useHover</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Tại đây, hoverMe chỉ đến HTML element cụ thể, trong khi đó isHovered là một giá trị boolean để check điều kiện
1 2 | <span class="token operator"><</span>div ref<span class="token operator">=</span><span class="token punctuation">{</span>hoverMe<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>isHovered <span class="token operator">?</span> <span class="token string">"Hovered!"</span> <span class="token operator">:</span> <span class="token string">"Hover me!"</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
useSlug Hook
Slug là một thành phần rất quan trọng trong mọi web project, nó có thể tăng SEO của trang web.
Ví dụ, nó sẽ chuyển đổi é
hoặc è
thành e
Như thường lệ, chúng ta cần import:
1 2 | <span class="token keyword">import</span> useSlug <span class="token keyword">from</span> <span class="token string">"hooks/useSlug"</span><span class="token punctuation">;</span> |
Khi khởi tạo hook, truyền bất kì string(có thể là tên bài viết) vào làm tham số thứ nhất. Kết quả trả về sẽ là well-form slug.
1 2 3 | useSlug("React Hooks! résoudre les problèmes quotidiens"); // react-hooks-resoudre-les-problemes-quotidiens |
useDrag and useDrop Hooks
Đây là 2 hook rất hữu dụng khi sử dụng chức năng kéo-thả của HTML5
Cài đặt:
1 2 | npm install ahooks --save |
import:
1 2 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useDrag<span class="token punctuation">,</span> useDrop <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ahooks'</span><span class="token punctuation">;</span> |
Cách sử dụng
Đầu tiên chúng ta cần khởi tạo useDrag
và useDrop
useDrag
sẽ trả về props được truyền tới DOM element. useDrop
trả về props được truyền vào drop area, nó cũng thông báo cho chúng ta về việc phần tử kéo có ở trên cùng khu vực thả hay không bằng cách sử dụng thuộc tính boolean (isHovering
)
Sau cùng, useDrop có 4 callback thực thi theo từng loại của item đã đc kéo-thả: onText
, onFiles
, onUri
, onDom
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">const</span> getDragProps <span class="token operator">=</span> <span class="token function">useDrag</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>props<span class="token punctuation">,</span> <span class="token punctuation">{</span> isHovering <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useDrop</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token function-variable function">onText</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">text<span class="token punctuation">,</span> e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">'text: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>text<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">' dropped</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onFiles</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">files<span class="token punctuation">,</span> e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>files<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> file dropped</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onUri</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">uri<span class="token punctuation">,</span> e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">uri: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>uri<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> dropped</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onDom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">content<span class="token operator">:</span> string<span class="token punctuation">,</span> e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">custom: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>content<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> dropped</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
1 2 | <span class="token operator"><</span>div <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">getDragProps</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>Draggable Element<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
1 2 3 4 | <span class="token operator"><</span>div <span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span><span class="token operator">></span> <span class="token punctuation">{</span>isHovering <span class="token operator">?</span> <span class="token string">'Release Item Here'</span> <span class="token operator">:</span> <span class="token string">'Drop Anything Here'</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
useDarkMode Hook
useDarkMode
hook xử lý việc chuyển đổi giữa light và dark mode của website. Sau khi chuyển đổi, nó sẽ lưu giá trị hiện tại vào trong một localStorage
. Điều này có nghĩa là lựa chọn của người dùng sẽ được áp dụng ngay khi trang web được mở.
Cài đặt thư viện:
1 2 | npm install react-recipes --save |
Import:
1 2 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useDarkMode <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-recipes"</span><span class="token punctuation">;</span> |
Cơ bản, useDarkMode()
trả về 2 thư:
darkMode
: là giá trị boolean trả về true nếu darkmode được kích hoạtsetDarkMode
: xử lý lựa chọn giữa light và dark mode
1 2 3 4 5 6 7 8 9 | <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>darkMode<span class="token punctuation">,</span> setDarkMode<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useDarkMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"header"</span><span class="token operator">></span> <span class="token operator"><</span>Toggle darkMode<span class="token operator">=</span><span class="token punctuation">{</span>darkMode<span class="token punctuation">}</span> setDarkMode<span class="token operator">=</span><span class="token punctuation">{</span>setDarkMode<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Kết luận
Trên đây chúng ta đã có được một vài ví dụ về những React hooks khá hữu dụng có thể áp dụng vào dự án của bạn. Trên thực tế, lợi ích chính của việc sử dụng React Hook là cho phép chúng ta có thể sử dụng lại code một cách dễ dàng nên chúng ta hoàn toàn có thể sử dụng những Hooks open-source như trên đây.