Hook های مفیدی که باید در پروژه بعدی React خود از آن استفاده کنید

از زمان اضافه شدن hooks ها به React برای افزایش قدرت برنامه نویسی functional، صدها نفر در سرتاسر جهان اقدام به ایجاد hook های سفارشی کرده اند که ما میتوانیم با استفاده از این hook ها سرعت و قدرت کد زدن خودمان را بالا ببریم و باعث بشیم که کدها تا جای ممکن clean شوند. پس در ادامه این نوشته در مورد Hook ها در React صحبت میکنیم.

من یک پروژه آزمایشی React برای نمایش همه ی hook های سفارشی معرفی شده در این مقاله ساخته ام که شما میتوانید از طریق لینک های زیر به این پروژه دسترسی داشته باشید و در عمل کاربرد و نحوه کار آن ها را ببینید.

1. useClippy

یک hook برای کپی کردن data و paste کردن آن توسط Ctrl-V/Command-V.

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>
    )
}

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>

)

}

2. useBrowserContextCommunication

useBrowserContextCommunication از Broadcast Channel API برای ارائه یک راه حل ساده و آسان بین context های مختلف مرورگر (tabs, iframes, windows) استفاده می کند.برای استفاده از این hook:

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

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

یک نام کانال به hook پاس دهید(دقیقا مشابه Broadcast Channel API)

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

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

این hook یک آرایه با دو آیتم را بر میگرداند که ولی communication state است.این state شامل LastMessage و message هایی است که آرایه ای از پیام هایی است که از tabs/windows دیگر به current state ارسال شده است.دومین آیتم یک تابع برای ارسال message به دیگر Context ها است.

3. useScript

useScript یک hook برای load اسکریپت های external به صورت خودکار است

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>
    )
}

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>

)

}

4. useLocalStorage

این hook ذخیره و بازیابی اطلاعات از localStorage. را ساده تر می کند.

برای نصب کتابخانه،دستور زیر را اجرا کنید

npm i @rehooks/local-storage

1	npm i @rehooks/local-storage

و مشابه زیر ایمپورت را انجام دهید

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

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

useLocalStorage با یک key name فراخوانی می شود.useLocalStorage یک آرایه با 3 آیتم را برمی گرداند.اولی مقدار یا همون value مربوط به storage است.دومی یک تابع برای تخصیص یک مقدار جدید به storage و سومی یک تابع برای حذف storage است.

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>
    )
}

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>

)

}

name در مثال بالای key ما است که به صورت پیش فرض مقدار name برای آن set شده است.از setName برای تخصیص یک value جدید به name و از deleteName برای حذف کردن name استفاده می شود.

5. useIdb

UseIdb از IndexedDB storage برای ذخیره سازی data در مرورگر استفاده می کند.

IndexedDB به اندازه همتای خود localStorage محبوب و معروف نیست اما نمی توان از آن غافل شد.

IndexedDB یک API برای ذخیره سازی مقدار قابل توجهی از structured data ها شامل files/blobs است.این API از indexes برای فعال کردن جستجوی هایی با کارایی بالا در این data ها استفاده می کند.

برای استفاده از آن ابتدا

npm i react-use-idb

1	npm i react-use-idb

مثال:

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>
    )
}

import { useIdb } from "react-use-idb"

function Component() {

const [ user, setUser ] = useIdb("user", { name: "nnamdi", age: 27 })

return (

<div>

User:

</div>

<button onClick={() => setUser({...user, age: 26})}></button>

</div>

)

}

6. use-mouse-action

یک کتابخانه با 3 React Hooks برای listening به mouse events ها بر روی element های JSX

طرح تخفیف ویژه به مناسبت عید فطر 1400

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>
        </>
    )    
}

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>

</>

)

}

7. useOnlineStatus

useOnlineStatus از navigator.onLine برای بررسی وضعیت شبکه استفاده میکند تا مشخص کند که کاربر به اینترنت متصل است یا نه

useOnlineStatus یک مقدار boolean برمیگرداند()(true/false برای ‘online’/’offline’)

import useOnlineStatus from "@rehooks/online-status"

function Component() {
    const online = useOnlineStatus()

    return (
        <div>
            Network {online ? "Online" : "Offline"}
        </div>
    )
}

import useOnlineStatus from "@rehooks/online-status"

function Component() {

const online = useOnlineStatus()

return (

<div>

Network {online ? "Online" : "Offline"}

</div>

)

}

8. useDocumentTitle

همانطور که میدونید جابجایی بین صفحات(کامپوننت ها) در React باعث نمی شود که عنوان نمایش داده شده در مرورگر تغییر پیدا کند.useDocumentTitle به شما کمک می کند این مشکل را حل کنید

import useDocumentTitle from "@rehooks/document-title"

function Component() {
    useDocumentTitle("Component Page")

    return (
        <div>
            ...
        </div>
    )
}

import useDocumentTitle from "@rehooks/document-title"

function Component() {

useDocumentTitle("Component Page")

return (

<div>

...

</div>

)

}

9. useSpeechSynthesis

این hook از Web Speech API برای تبدیل text به sound استفاده میکند و کار را برای ما در پروژه های React برای این تبدیل خیلی راحت می کند.

برای استفاده ابتدا دستور زیر را اجرا کنید

npm i react-speech-kit

1	npm i react-speech-kit

سپس

import { useSpeechSynthesis } from "react-speech-kit"

1	import { useSpeechSynthesis } from "react-speech-kit"

useSpeechSynthesis یک object با تابع speak را برمی گرداند.

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>
    )
}

import { useSpeechSynthesis } from "react-speech-kit"

function Component() {

const ref = React.useRef()

const { speak } = useSpeechSynthesis()

return (

<div>

<button onClick={() => speak({text: ref.current.value})}>Speak</button>

</div>

)

}

10. useSpeechRecognition

این hook برای sound-to-text translation استفاده می شود.این hook از Web Speech API برای تبدیل sound به text در برنامه های React استفاده می شود.

برای استفاده از اون کافیه که ابتدا این کتابخانه را نصب و سپس import کنید

npm i react-speech-kit
import { useSpeechRecognition } from "react-speech-kit"

1 2	npm i react-speech-kit import { useSpeechRecognition } from "react-speech-kit"

useSpeechRecognition یک object را بر می گرداند:

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>
    )
}

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" : ""}

<button onClick={listen}>Listen</button>

</div>

)

}

امیدوارم که از خوندن این مقاله لذت برده باشید و اگر براتون مفید بوده اون رو با دوستان و همکارانتون به اشتراک بزارید.همچنین اگر قصد دارید به صورت یک برنامه نویس حرفه ای React فعالیت کنید،پیشنهاد میکنم دوره آموزش جامع ReactJs را مشاهده کنید.

[منبع]