Top 5 thư viện ReactJS nhất định phải biết

react-portal

Tôi nghĩ rằng các cổng (portals) trong ReactJS quen thuộc với hầu hết mọi người, ngay cả khi hiếm được sử dụng. Đây là cách chúng được mô tả trong tài liệu React :

“Portals là cách tốt nhất để render component con trong DOM tồn tại bên ngoài hệ thống phân cấp DOM của component cha.”

Thông thường, toàn bộ ứng dụng React của chúng ta được hiển thị chỉ trong một nút DOM trong HTML. Nhưng với các cổng, chúng ta có thể xác định các nơi bổ sung.

Chúng ta làm như sau :

import { Portal } from ‘react-portal’
<Portal node={document && document.getElementById(‘portal’)}>
  <p>This is portaled into the portal div!</p>
</Portal>

Chỉ cần tập trung vào portal trong mã HTML với các selector JavaScript điển hình, như getElementById.

Trong file public/index.html ứng dụng React.js của bạn:

<div id=”root”></div>
<div id=”portal”></div>

Như bạn có thể thấy, element root trong app react vẫn ở đó. Bạn đã tạo được một element portal ngoài root để sử dụng khi bạn cần.

react-toastify

Cung cấp thông tin động cho client trên trang web ReactJS là hoàn toàn cần thiết trên web hiện nay. Hàm alert () trong JavaScript không phải là một lựa chọn tốt cho mục đích này.

Và react-toastify được ra đời để khắc phục điều này. Rất nhẹ và dễ tùy chỉnh trong ReactJS.

Code sẽ như thế này

import { ToastContainer, toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
toast.configure({
  autoClose: 2000,
  draggable: false,
  position: toast.POSITION.TOP_LEFT
})
const notify = () => toast('Wow so easy !')
const App = () => (
  <div className="App">
    <button onClick={notify}>Notify !</button>
  </div>
)

Có thể giải thích đoạn code trên như sau:

Import thư viện react-toastify
.configure dùng để tùy chỉnh lại toast. ví dụ : autoClose:2000, tự ẩn sau 2000ms
để sử dụng gọi toast(‘Text muốn hiển thị’)

react-contextmenu

Thật khó để có thể tưởng tượng phần mềm mà không có menu, nhưng trên các trang web (đặc biệt là ReactJS)., nó lại không giống trên app. Việc sử dụng chuột phải của người dùng, được sử dụng càng nhiều trên các trang web.

Chủ yếu sử dụng để hiển thị contextmenu, và đây là đoạn code của thư viện react-contextmenu. Chúng ta có thể tùy chỉnh việc hiển thị menu và nội dung của nó.

import React from 'react'
import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu'
const App = () => (
	<React.Fragment>
		<ContextMenuTrigger id="TriggerID"> {/* ID for every instance must be individual */}
			<p>Right click on me!</p>
		</ContextMenuTrigger>
		<ContextMenu id="MenuID">
			<MenuItem onClick={() => alert('first ')}>
				<button>1. Item</button>
			</MenuItem>
			<MenuItem onClick={() => alert('second')}>
				<button>2. Item</button>
			</MenuItem>
		</ContextMenu>
	</React.Fragment>
)
export default App

<ContextMenuTrigger> là thành phần mà chúng ta cần nhấp chuột phải để chuyển đổi menu.Menu được định nghĩa bên trong <ContextMenu>. Đối với mỗi mục, có thành phần <MenuItem> mà chúng ta có thể đưa ra một sự kiện onClick để xử lý đầu vào của người dùng.

react-lazy-load-image-component

Đối với những trang web hiển thị sản phẩm hoặc trang mạng xã hội hình ảnh, khi load một lúc quá nhiều hình ảnh dẫn đến khung trắng do không load kịp. Và thường khi load xong, nó sẽ hiện ngay, khiến cho mắt người dùng khó chịu.

Vì vậy react-lazy-load-image-component khắc phục điều đó bằng cách làm mờ ảnh rồi từ từ hiện lên như GIF bên dưới. Như vậy sẽ dễ chịu hơn

Và đây là đoạn code trên ReactJS:

import React from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component'
import 'react-lazy-load-image-component/src/effects/blur.css'
const App = () => (
	<React.Fragment>
		<LazyLoadImage
			alt={'this is the alt'}
			width={'900px'}
			effect="blur"
			src={'https://<link>//'}
		/>
	</React.Fragment>
)
export default App

react-onclickoutside

Một quy tắc quan trọng của thiết kế giao diện người dùng là biết càng nhiều nơi nhập của người dùng càng tốt. Điều này cần phải rõ ràng với mọi người, và đôi khi có thể khó thực hiện.

Một thư viện React với các ý định như vậy là react-onclickoutside, cho phép chúng ta xử lý các sự kiện nhấp bên ngoài.

Trong ví dụ sau, bạn có thể thấy cách chúng ta có thể thực hiện điều này cho một nút và h1 đơn giản. Chỉ khi bạn nhấp vào bất cứ thứ gì trừ hai cái, console.log sẽ được hiện ra. Chức năng xử lý chính xác sự kiện này phải được gọi là handleClickOutside.

import React, { Component } from 'react'
import onClickOutside from 'react-onclickoutside'
class App extends Component {
	handleClickOutside = evt => {
		console.log('You clicked outside!')
	}
	render() {
		return (
			<div>
				<h1>Click outside!</h1>
				<button>Don't click me!</button>
			</div>
		)
	}
}
export default onClickOutside(App)

Kết luận

Qua bài viết, bạn đã biết được 5 thư viện cực chất cho ReactJS. Khi biết những thư viện này, hãy áp dụng vào web ngay lập tức. Giúp người dùng có nhiều trải nghiệm tuyệt vời nhất có thể.

Hãy tham khảo thêm về ReactJS : 10 React Components mới tuyệt vời nhất 04/2020

HocWeb VN

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.

What's Your Reaction?

hate

confused

fail

fun

geeky

love

lol

omg

win