ایجاد یک هوک React برای ویبره دستگاه

ویبره دادن می تواند یک راه مفید برای ارائه بازخورد لمسی به کاربران در برنامه های وب باشد. در این مقاله ، به بررسی اینکه چگونه یک هوک React برای ویبره دادن با استفاده از API vibrate در Typescript ایجاد کنیم، می پردازیم.API vibrate بخشی از API لرزش های وب است که به برنامه های وب امکان لرزش دادن دستگاه توسط کدی که در آن اجرا می شوند را می دهد. این API راهی ساده برای لرزش دادن دستگاه به مدت زمان مشخص یا با یک الگو خاص ارائه می دهد.برای استفاده از API vibrate، می توانید تابع navigator.vibrate را با یک آرگومان واحد فراخوانی کنید که الگوی لرزش را مشخص می کند. الگوی لرزش می تواند یک عدد واحد باشد که مدت زمان لرزش را به میلی ثانیه مشخص می کند، یا آرایه ای از اعداد که مدت زمان های لرزش و توقف های آنها را مشخص می کندبه عنوان مثال، برای لرزش دستگاه به مدت 200 میلی ثانیه، می توانید navigator.vibrate(200) را فراخوانی کنید. برای لرزش دستگاه با الگوی دو لرزش کوتاه و یک وقفه بلند و سپس سه لرزش کوتاه، می توانید navigator.vibrate([50، 50، 100، 50، 50، 50]) را فراخوانی کنیدحال، ما می‌خواهیم یک هوک سفارشی بنویسیم که به راحتی بتوانیم با استفاده از آن برای بازخورد لرزشی از API vibrate استفاده کنیم.ایجاد هوک سفارشیtype VibrationPattern = number | number[];این کد یک نوع داده‌ی TypeScript به نام VibrationPattern تعریف می‌کند که می‌تواند شامل یک عدد یا یک آرایه از اعداد باشد. ما این نوع داده را برای ذخیره الگوی اثر لرزشی که به hook ما ارسال می‌شود، استفاده می‌کنیم.Hook useVibration:const useVibration = (pattern: VibrationPattern): (() => void) => {}این کد یک hook سفارشی برای React تعریف می‌کند که به آن useVibration می‌گویند. این hook یک الگوی اثر لرزشی به عنوان ورودی دریافت می‌کند و یک تابع را به عنوان خروجی برمی‌گرداند.isSupported State : const [isSupported, setIsSupported] = useState<boolean>(false);این کد یک state به نام isSupported را تعریف می‌کند که مشخص می‌کند آیا دستگاه کاربر از API navigator.vibrate پشتیبانی می‌کند یا خیر. این وضعیت با استفاده از useState ایجاد شده است و مقدار اولیه آن false قرار داده شده است.قبل از هرچیز، نیاز است که چک کنیم که دستگاه کاربر پشتیبانی از ویبره دارد یا خیر. برای این منظور، چک می کنیم که در navigator آیا vibrate وجود دارد یا خیر useEffect(() => { setIsSupported(!!navigator.vibrate) }, []); این کد یک افکت را با استفاده از useEffect تعریف می‌کند که هنگامی که component بارگذاری می‌شود، اجرا می‌شود. در این حالت، از navigator.vibrate استفاده می‌کنیم تا بررسی کنیم که آیا دستگاه کاربر از این API پشتیبانی می‌کند یا خیر. سپس، با استفاده از setIsSupported، مقدار وضعیت isSupported را به true یا false تغییر می‌دهیم.vibrate functionconst vibrate = () => { if (isSupported) { try { navigator.vibrate(pattern); } catch (error) { console.error(&quotVibration failed: &quot, error); } } else { console.error(&quotVibration not supported on this device.&quot); } };این کد تابع vibrate را تعریف می‌کند که الگوی اثر لرزش را با استفاده از API navigator.vibrate اجرا می‌کند. در ابتدا، این تابع بررسی می‌کند که آیا دستگاه کاربری از navigator.vibrate پشتیبانی می‌کند یا خیر. اگر پشتیبانی شود، سعی می‌کند الگوی اثر لرزش را با استفاده از navigator.vibrate اجرا کند. در غیر این صورت، یک خطای مناسب نمایش داده می‌شودکد کامل :import {useEffect, useState} from 'react' type VibrationPattern = number | number[]; const useVibration = (pattern: VibrationPattern): (() => void) => { const [isSupported, setIsSupported] = useState<boolean>(false); useEffect(() => { setIsSupported(!!navigator.vibrate); }, []); const vibrate = () => { if (isSupported) { try { navigator.vibrate(pattern); } catch (error) { console.error('Vibration failed: ', error); } } else { console.error('Vibration not supported on this device.'); } }; return vibrate; };نحوه استفاده :برای استفاده از این Hook، ابتدا آن را در فایل خودتان import کنید. سپس به آن ورودی الگوی لرزش را ارسال کنید. به عنوان مثال، فرض کنید می‌خواهید دستگاه کاربر هنگام برخورد با خطاهایی که در برنامه شما رخ می‌دهند، لرزش داشته باشد. برای این منظور، می‌توانید از Hook useVibration به شکل زیر استفاده کنید:import { useState } from 'react'; import useVibration from './useVibration'; const MyComponent = () => { const [errorMessage, setErrorMessage] = useState<string>(''); const vibrate = useVibration(1000); const handleClick = () => { try { // some code that may throw an error } catch (error) { setErrorMessage(error.message); vibrate(); } } return ( <div> <button ={handleClick}>Click me</button> {errorMessage && <p>{errorMessage}</p>} </div> ) }سخن پایانی : به این هوک میشه ویژگی های زیادی اضافه کرد در کل هدف این آموش آشنایی با vibrate API است امیدوارم که این توضیحات به شما کمک کافی را برای درک کد و اصول بهینه سازی و نگهداری کافی را داشته باشد. در صورتی که سوال دیگری داشتید، با من در ارتباط باشید.