diff --git a/pages/hooks/_meta.json b/pages/hooks/_meta.json
index 3aa1a38..734d19a 100644
--- a/pages/hooks/_meta.json
+++ b/pages/hooks/_meta.json
@@ -4,6 +4,7 @@
"use-cookie": "useCookie",
"use-env": "useEnv",
"use-fetch": "useFetch",
+ "use-geolocation": "useGeolocation",
"use-history": "useHistory",
"use-loading": "useLoading",
"use-media-query": "useMediaQuery",
diff --git a/pages/hooks/use-geolocation.mdx b/pages/hooks/use-geolocation.mdx
new file mode 100644
index 0000000..9e03d4e
--- /dev/null
+++ b/pages/hooks/use-geolocation.mdx
@@ -0,0 +1,116 @@
+import { Steps } from 'nextra/components'
+import AvatarCircles from "@/components/magic-ui/avatar.circles.tsx";
+
+# useGeolocation
+
+
A custom hook that provides functionalities for accessing and managing geolocation data.
+
+### Add hook
+
+Create a file `use-geolocation.ts` and copy & paste the code from [useGeolocation](/hooks/use-geolocation#hook).
+
+### Hook
+
+```ts copy
+import { useState, useEffect, useCallback } from 'react'
+
+type Coordinates = {
+ latitude: number | null
+ longitude: number | null
+}
+
+type GeolocationError = {
+ code: number
+ message: string
+} | null
+
+type GeolocationOptions = {
+ enableHighAccuracy?: boolean
+ timeout?: number
+ maximumAge?: number
+}
+
+export const useGeolocation = (options?: GeolocationOptions) => {
+ const [coordinates, setCoordinates] = useState({
+ latitude: null,
+ longitude: null,
+ })
+
+ const [error, setError] = useState(null)
+
+ const handleSuccess = (position: GeolocationPosition) => {
+ const { latitude, longitude } = position.coords
+ setCoordinates({ latitude, longitude })
+ setError(null)
+ }
+
+ const handleError = (error: GeolocationPositionError) => {
+ setError({
+ code: error.code,
+ message: error.message,
+ })
+ }
+
+ const getCurrentPosition = useCallback(() => {
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options)
+ } else {
+ setError({
+ code: 0,
+ message: 'Geolocation is not supported by your browser.',
+ })
+ }
+ }, [options])
+
+ useEffect(() => {
+ getCurrentPosition()
+ }, [getCurrentPosition])
+
+ return { coordinates, error, refresh: getCurrentPosition }
+}
+```
+
+### Usage
+
+```jsx copy
+import React from 'react';
+import { useGeolocation } from './hooks/use-geolocation';
+
+function GeolocationComponent() {
+ const { coordinates, error, refresh } = useGeolocation();
+
+ if (error) {
+ return Error: {error.message}
;
+ }
+
+ return (
+
+
Geolocation Demo
+ {coordinates.latitude && coordinates.longitude ? (
+
+ Latitude: {coordinates.latitude}, Longitude: {coordinates.longitude}
+
+ ) : (
+
Loading location...
+ )}
+
Refresh Location
+
+ );
+}
+
+export default GeolocationComponent;
+```
+
+## API
+
+Returns
+
+| Name | Description |
+|------|-------------|
+| `coordinates` | An object containing the current latitude and longitude. |
+| `error` | An object containing error information if geolocation fails. |
+| `refresh` | A function to manually refresh the geolocation. |
+
+## Contributors
+
+
\ No newline at end of file
diff --git a/theme.config.jsx b/theme.config.jsx
index 24a3f11..751de07 100644
--- a/theme.config.jsx
+++ b/theme.config.jsx
@@ -83,24 +83,11 @@ const config = {
return (
{title}
- {(title === "useLoading" ||
- title === "useBattery" ||
- title === "useUrl" ||
- title === "useEnv" ||
- title === "useMouse" ||
- title === "useUnsavedFormChanges" ||
- title === "useCookie" ||
- title === "useSession" ||
- title === "useMediaQuery") && (
+ {title === "useGeolocation" && (
New
)}
- {title === "useFetch" && (
-
- Updated
-
- )}
);
},