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/