7 móc phản ứng tuyệt vời

Tram Ho

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:

Sau đó import useFiler hook từ crooks:

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ụ:

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:

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:

Remove file

Truyền ID cùa file vào trong hàm remove() để xoá

Clear all files

Gọi hàm clear() để xoá toàn bộ files:


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:

Tạo thử 1 request:

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:

Khởi tạo:

Tại đây, hoverMe chỉ đến HTML element cụ thể, trong khi đó isHovered là một giá trị boolean để check điều kiện


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:

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.

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:

import:

Cách sử dụng

Đầu tiên chúng ta cần khởi tạo useDraguseDrop

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

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:

Import:

Cơ bản, useDarkMode() trả về 2 thư:

  • darkMode: là giá trị boolean trả về true nếu darkmode được kích hoạt
  • setDarkMode: xử lý lựa chọn giữa light và dark mode

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.

Tư liệu tham khảo

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo