React Custom Hook: useGeolocation

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке «useGeolocation», одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

Github: https://github.com/sergeyleschev/react-custom-hooks

import { useState, useEffect } from "react"  export default function useGeolocation(options) {     const [loading, setLoading] = useState(true)     const [error, setError] = useState()     const [data, setData] = useState({})     useEffect(() => {         const successHandler = e => {             setLoading(false)             setError(null)             setData(e.coords)         }         const errorHandler = e => {             setError(e)             setLoading(false)         }         navigator.geolocation.getCurrentPosition(             successHandler,             errorHandler,             options         )         const id = navigator.geolocation.watchPosition(             successHandler,             errorHandler,             options         )         return () => navigator.geolocation.clearWatch(id)     }, [options])     return { loading, error, data } }

Хук useGeolocation использует хуки useState и useEffect от React для управления состоянием загрузки, ошибками и данными о геолокации. Для настройки поведения геолокации требуется дополнительный параметр «options», позволяющий вам точно настроить точность и другие параметры в соответствии с вашими конкретными потребностями.

Одним из ключевых преимуществ useGeolocation является его простота. Инкапсулируя сложную логику, необходимую для доступа к геолокации и ее обработки, этот хук обеспечивает простое и многократно используемое решение. Хук автоматически обрабатывает состояние загрузки, обновляя его при получении данных геолокации, и устанавливает состояние ошибки, если в процессе возникают какие-либо проблемы.

Функция useGeolocation также использует метод watchPosition из Geolocation API, который позволяет осуществлять непрерывный мониторинг местоположения пользователя. Это может быть полезно в сценариях, где требуется обновление местоположения пользователя в режиме реального времени, например, в приложениях для отслеживания или интерактивных картах.

Чтобы воспользоваться этим приемом, просто импортируйте useGeolocation в свой компонент и измените параметры загрузки, ошибки и данных. Объект data содержит значения широты и долготы, что позволяет легко отображать местоположение пользователя в пользовательском интерфейсе. Переменная загрузки информирует вас о текущем состоянии поиска геолокации, а переменная error предоставляет любые сообщения об ошибках, если это применимо.

import useGeolocation from "./useGeolocation"  export default function GeolocationComponent() {     const {         loading,         error,         data: { latitude, longitude },     } = useGeolocation()     return (         <>             <div>Loading: {loading.toString()}</div>             <div>Error: {error?.message}</div>             <div>                 {latitude} x {longitude}             </div>         </>     ) }

Компонент GeolocationComponent, показанный выше, демонстрирует базовую реализацию хука useGeolocation. Он отображает состояние загрузки, сообщение об ошибке (если таковое имеется) и значения широты и долготы пользователя. С помощью всего нескольких строк кода вы можете легко интегрировать хук геолокации в свои приложения React.

Полная версия | Пользовательские хуки React: https://habr.com/en/articles/746760/