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


از زمان اضافه شدن hooks ها به React برای افزایش قدرت برنامه نویسی functional، صدها نفر در سرتاسر جهان اقدام به ایجاد hook های سفارشی کرده اند که ما میتوانیم با استفاده از این hook ها سرعت و قدرت کد زدن خودمان را بالا ببریم و باعث بشیم که کدها تا جای ممکن clean شوند. پس در ادامه این نوشته در مورد Hook ها در React صحبت میکنیم.
من یک پروژه آزمایشی React برای نمایش همه ی hook های سفارشی معرفی شده در این مقاله ساخته ام که شما میتوانید از طریق لینک های زیر به این پروژه دسترسی داشته باشید و در عمل کاربرد و نحوه کار آن ها را ببینید.
1. useClippy
یک hook برای کپی کردن data و paste کردن آن توسط Ctrl-V/Command-V.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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:
1 |
import useBrowserContextCommunication from "react-window-communication-hook" |
یک نام کانال به hook پاس دهید(دقیقا مشابه Broadcast Channel API)
1 |
const [communicationState, postMessage] = useBrowserContextCommunication("politicsChannel"); |
این hook یک آرایه با دو آیتم را بر میگرداند که ولی communication state است.این state شامل LastMessage و message هایی است که آرایه ای از پیام هایی است که از tabs/windows دیگر به current state ارسال شده است.دومین آیتم یک تابع برای ارسال message به دیگر Context ها است.
3. useScript
useScript
یک hook برای load اسکریپت های external به صورت خودکار است
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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. را ساده تر می کند.
برای نصب کتابخانه،دستور زیر را اجرا کنید
1 |
npm i @rehooks/local-storage |
و مشابه زیر ایمپورت را انجام دهید
1 |
import { useLocalStorage } from "@rehooks/local-storage" |
useLocalStorage
با یک key name فراخوانی می شود.useLocalStorage
یک آرایه با 3 آیتم را برمی گرداند.اولی مقدار یا همون value مربوط به storage است.دومی یک تابع برای تخصیص یک مقدار جدید به storage و سومی یک تابع برای حذف storage است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
در مثال بالای 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 ها استفاده می کند.
برای استفاده از آن ابتدا
1 |
npm i react-use-idb |
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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> ) } |
6. use-mouse-action
یک کتابخانه با 3 React Hooks برای listening به mouse events ها بر روی element های JSX
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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’)
1 2 3 4 5 6 7 8 9 10 11 |
import useOnlineStatus from "@rehooks/online-status" function Component() { const online = useOnlineStatus() return ( <div> Network {online ? "Online" : "Offline"} </div> ) } |
8. useDocumentTitle
همانطور که میدونید جابجایی بین صفحات(کامپوننت ها) در React باعث نمی شود که عنوان نمایش داده شده در مرورگر تغییر پیدا کند.useDocumentTitle
به شما کمک می کند این مشکل را حل کنید
1 2 3 4 5 6 7 8 9 10 11 |
import useDocumentTitle from "@rehooks/document-title" function Component() { useDocumentTitle("Component Page") return ( <div> ... </div> ) } |
9. useSpeechSynthesis
این hook از Web Speech API برای تبدیل text به sound استفاده میکند و کار را برای ما در پروژه های React برای این تبدیل خیلی راحت می کند.
برای استفاده ابتدا دستور زیر را اجرا کنید
1 |
npm i react-speech-kit |
سپس
1 |
import { useSpeechSynthesis } from "react-speech-kit" |
useSpeechSynthesis
یک object با تابع speak
را برمی گرداند.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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> ) } |
10. useSpeechRecognition
این hook برای sound-to-text translation استفاده می شود.این hook از Web Speech API برای تبدیل sound به text در برنامه های React استفاده می شود.
برای استفاده از اون کافیه که ابتدا این کتابخانه را نصب و سپس import کنید
1 2 |
npm i react-speech-kit import { useSpeechRecognition } from "react-speech-kit" |
useSpeechRecognition
یک object را بر می گرداند:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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> ) } |
امیدوارم که از خوندن این مقاله لذت برده باشید و اگر براتون مفید بوده اون رو با دوستان و همکارانتون به اشتراک بزارید.همچنین اگر قصد دارید به صورت یک برنامه نویس حرفه ای React فعالیت کنید،پیشنهاد میکنم دوره آموزش جامع ReactJs را مشاهده کنید.
[منبع]
مطالب زیر را حتما مطالعه کنید
ویژگی ها و قابلیت های جدید react 18
فریمورک های Frontend که باید در سال 2021 یاد بگیرید
نگاه اولیه به React Server Component
React Higher Order Components چیست
5 React Best Practice که باید در سال 2020 یاد بگیرید
آموزش استفاده و کار با useContext Hook در react
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
من چند تا مقاله خوندم تو بلاگ سایتتون
تشکر میکنم واقعا مفید بودن
ممنون هادی عزیز