11 React Hooks hữu ích không thể bỏ qua

useClippy

useClippy chức năng sao chép dữ liệu vào clipboard và lấy / dán nó bằng Ctrl-C / Command-C và Ctrl-V / Command-V React.

Ví dụ

import useClippy from "use-clippy"
function Component() {
    const [ clipboard, setClipboard ] = useClipy()
    return (
        <div>
            <div>Clipboard</div>
            <div>{clipboard}</div>
            <button onClick={() => setClipboard("nnamdi")}>Set Clipboard</button>
        </div>
    )
}

Trong ví dụ trên, chúng tôi hủy cấu trúc useClippy thành clipboard và setClipboard. clipboard là dữ liệu trong clipboard và setClipboard gắn dữ liệu trong clipboard.

useBrowserContextCommunication

useBrowserContextC sử dụng Broadcast Channel API để cung cấp một giải pháp dễ dàng để liên lạc giữa các trình duyệt khác nhau (tab, iframes, windows).

Ví dụ

import useBrowserContextCommunication from "react-window-communication-hook"

Truyền tên kênh

const [communicationState, postMessage] = useBrowserContextCommunication("politicsChannel");

Nó sẽ trả về mảng có 2 phần Đầu tiên là trang thái (State). Trạng thái này chứa LastMessage và tin nhắn là một mảng các tin nhắn được gửi từ các tab / cửa sổ khác đến trạng thái hiện tại. Phần thứ hai là một chức năng được sử dụng để gửi tin nhắn đến bối cảnh khác.

useScript

useScript dùng để tải (và thông báo khi tải xong) các tập lệnh bên ngoài, một cách linh hoạt trong React.

Ví dụ

import useScript from "react-script-hook"
function Component() {
    const [ loading, error ] = useScript({
        src: "analytics.google.com/api/v2/",
        onload: () => console.log("Script loaded")
    })
    if(loading) return <div>Script loading</div>
    if(error) return <div>Error occured</div>
    return (
        <div>
            ...
        </div>
    )
}

Trong ví dụ này, chúng tôi muốn thêm phân tích vào thành phần của mình bằng cách tải tập lệnh bên ngoài này bằng useScript. Thuộc tính tải cho biết khi tập lệnh bên ngoài tải xong. Chúng tôi kiểm tra flag tải và lỗi để hiển thị thông báo phù hợp.

useLocalStorage

useLocalStorage này dùng để đơn giản hóa việc lưu trữ và truy xuất dữ liệu từ localStorage.

Cài đặt thư viện:

npm i @rehooks/local-storage

Import vào

import { useLocalStorage } from "@rehooks/local-storage"

Ví dụ

import { useLocalStorage } from "@rehooks/local-storage"
function Component() {
    const [ name, setName, deleteName ] = useLocalStorage("name")
    return (
        <div>
            <div>Key: "name" | Value: "{name}"</div>
            <div>
                <button onClick={ ()=> setName("nnamdi")}>Set Name</button>
                <button onClick={deleteName}>Delete Value</button>
            </div>
        </div>
    )
}

Name là chìa khóa nơi chúng ta có thể đặt giá trị. Name là giá trị ban đầu của khóa, setName sẽ đặt giá trị trong khóa tên, deleteName sẽ xóa giá trị.

useIdb

UseIdb sử dụng bộ lưu trữ IndexedDB trong trình duyệt để lưu trữ dữ liệu. IndexedDB không phổ biến hoặc được biết đến như là đối tác localStorage của nó.

IndexedDB là một API cấp thấp để lưu trữ phía máy khách một lượng dữ liệu có cấu trúc đáng kể, bao gồm các tệp. API này sử dụng các chỉ mục để cho phép tìm kiếm hiệu suất cao của dữ liệu trong React.

Ví dụ

import { useIdb } from "react-use-idb"
function Component() {
    const [ user, setUser ] = useIdb("user", { name: "nnamdi", age: 27 })
    return (
        <div>
            <div>
                User:
                <div>Name: {user.name}</div>
                <div>Age: {user.age}</div>
            </div>
            <button onClick={() => setUser({...user, age: 26})}></button>
        </div>
    )
}

Chúng ta đặt cơ sở dữ liệu với key và giá trị ban đầu trong một đối tượng. useIdb trả về một mảng mà chúng ta cấu trúc để truy xuất giá trị và hàm cập nhật, tương ứng là user và setUser.

use-mouse-action

use-mouse-action: Một thư viện React theo các sự kiện chuột trên một phần tử hoặc phần tử JSX.

useMouseAction: sử dụng để đăng ký hành động chuột trên một yếu tố.

useMouseDown: sử dụng để đăng ký một sự kiện chuột xuống trên một yếu tố.

useMouseUp: một sự kiện chuột lên trên một yếu tố.

Ví dụ

import { useMouseAction, useMouseDown, useMouseUp } from "use-mouse-action"
function Component() {
    const mouseActionProps = useMouseAction({
        onAction: () => console.log("Mouse clicked")
    })
    const mouseDownProps = useMouseDown(() => console.log("Mouse down"))
    const mouseUpProps = useMouseUp(() => console.log("Mouse up"))
    return (
        <>
            <button {...mouseActionProps}>Mouse Action</button>
            <button {...mouseDownProps}>Mouse Down</button>
            <button {...mouseUpProps}>Mouse Up</button>
        </>
    )
}

Button Mouse Action đăng ký sự kiện nhấp, xuống và lên. Nó sẽ hiển thị thông báo “Mouse clicked”(Nhấp chuột) khi chúng tôi nhấp vào nó.

Button Mouse Down đăng ký sự kiện onmousedown. Vì vậy, khi chúng ta nhấp vào nó trước tiên, thông báo “Mouse down”(Di chuột xuống) được in trên bảng điều khiển.

Button Mouse Up đăng ký sự kiện onmouseup. Vì vậy, khi chúng ta nhấp vào nó , “Mouse Up”(di chuột lên) sẽ được in trên bảng điều khiển.

useOnlineStatus

useOnlineStatus sử dụng navigator. Thuộc tính onLine để kiểm tra trạng thái mạng để xác định xem người dùng có kết nối với internet hay không

useOnlineStatus trả về kiểu boolean (true/false tương ứng ‘online’/’offline’)

Ví dụ

import useOnlineStatus from "@rehooks/online-status"
function Component() {
    const online = useOnlineStatus()
    return (
        <div>
            Network {online ? "Online" : "Offline"}
        </div>
    )
}

Tại đây, chúng tôi sử dụng toán tử ternary để hiển thị Online nếu Online hoặc Offline nếu Offline.

useDocumentTitle

useDocumentTitle : Như bạn có thể biết, việc định tuyến(Routing) trong các ứng dụng React không tự động cập nhật tiêu đề trang (được hiển thị trong các tab của trình duyệt). useDocumentTitle giúp giải quyết điều đó.

Ví dụ:

import useDocumentTitle from "@rehooks/document-title"
function Component() {
    useDocumentTitle("Component Page")
    return (
        <div>
            ...
        </div>
    )
}

useNetworkStatus

useNetworkStatus giúp lấy được những thuộc tính trong navigator.connection biểu hiện trạng thái network React

• downlink
• effectiveType (checks nếu user có kết nối chậm hoặc không có kết nối)
• rtt
• saveData (cho biết trình duyệt đang ở chế độ tiết kiệm dữ liệu)

Ví dụ

import useNetworkStatus from "@rehooks/network-status"
function Component() {
    const connection = useNetworkStatus()
    const { effectiveType, saveData, rtt, downlink } = connection;
    return (
        <div>
            <div>Network: {connection.effectiveType ? "Fast" : "Slow"}</div>
            <div>Data Saver Mode: {saveData ? "Yes" : "No" }</div>
        </div>
    )
}

Đoạn code trên chỉ đơn giản hiển thị trạng thái mạng của người dùng bằng cách sử dụng useNetworkStatus.

useSpeechSynthesis

useSpeechSynthesis sử dụng API Web Speech để dễ dàng sử dụng tổng hợp văn bản thành âm thanh trong ứng dụng React.

Ví dụ

import { useSpeechSynthesis } from "react-speech-kit"
function Component() {
    const ref = React.useRef()
    const { speak } = useSpeechSynthesis()
    return (
        <div>
            <input type="text" ref={ref} />
            <button onClick={() => speak({text: ref.current.value})}>Speak</button>
        </div>
    )
}

Trong ví dụ trên, chúng tôi sử dụng ref để lấy phiên bản HTML của input[type=”text”]. Khi nhấp vào button Speak, chúng ta gọi chức năng nói; và truyền đối tượng, đối tượng giữ ‘text’ là văn bản được nhập vào input. Điều này sẽ khiến hệ điều hành phát ra âm thanh văn bản.

useSpeechRecognition

useSpeechRecognition Điều này được sử dụng để dịch âm thanh thành văn bản. Móc này sử dụng API Web Speech để chuyển đổi âm thanh thành văn bản trong ứng dụng React của chúng tôi.

The useSpeechRecognition returns an object that contains:

listen: a function that tells the browser to listen for audio coming from the mic.

listening: a boolean value that indicates the browser is listening for input in the mic.

stop: a function that cancels listening for input coming from the mic.

Ví dụ

import { useSpeechRecognition } from "react-speech-kit"
function Component() {
    const [ result, setResult ] = useState()
    const { listen, listening, stop } = useSpeechRecognition({
        onResult: result => setResult(result)
    })
    return (
        <div>
            {listening ? "Speak, I'm listening" : ""}
            <textarea value={value} />
            <button onClick={listen}>Listen</button>
            <button onClick={stop}>Stop</button>
        </div>
    )
}

Kết luận

Qua bài viết, chúng ta đã biết thêm 11 package để có thể thêm vào app của bạn. Giúp phát triển nhiều tính năng và sáng tạo hơn.

Tham khảo để viết app React và sử dụng chúng : Tự học React JS thời đại dịch Corona nCoV – Phần 1