/*! For license information please see fe266fcd.4bb0c219.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[9718],{80704:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>i,toc:()=>u});var n=t(85893),s=t(11151);const r={sidebar_position:10,title:"useGeolocation",comment:!0,tags:["Reactjs","Custom Hook","useGeolocation"]},a=void 0,i={id:"reactjs/custom-hook/use-geolocation",title:"useGeolocation",description:"",source:"@site/issues/reactjs/custom-hook/use-geolocation.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-geolocation",permalink:"/issues/reactjs/custom-hook/use-geolocation",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-geolocation.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useGeolocation",permalink:"/issues/tags/use-geolocation"}],version:"current",sidebarPosition:10,frontMatter:{sidebar_position:10,title:"useGeolocation",comment:!0,tags:["Reactjs","Custom Hook","useGeolocation"]},sidebar:"tutorialSidebar",previous:{title:"useSize",permalink:"/issues/reactjs/custom-hook/use-size"},next:{title:"useDebounce",permalink:"/issues/reactjs/custom-hook/use-debounce"}},c={},u=[];function l(e){const o={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:"const useGeolocation = (options) => {\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState();\n  const [data, setData] = useState({});\n\n  useEffect(() => {\n    const successHandler = (e) => {\n      setLoading(false);\n      setError(null);\n      setData(e.coords);\n    };\n    const errorHandler = (e) => {\n      setLoading(false);\n      setError(e);\n    };\n\n    navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);\n\n    const id = navigator.geolocation.watchPosition(successHandler, errorHandler, options);\n\n    return () => navigator.geolocation.clearWatch(id);\n  }, [options]);\n\n  return { loading, error, data };\n};\n\nconst App = () => {\n  const {\n    loading,\n    error,\n    data: { latitude, longitude },\n  } = useGeolocation();\n\n  return (\n    <>\n      <div>Loading: {loading.toString()}</div>\n      <div>Error: {error && error.message}</div>\n      <div>\n        latitude: {latitude} - longitude: {longitude}\n      </div>\n    </>\n  );\n};\n\nrender(<App />);\n"})})}function d(e={}){const{wrapper:o}={...(0,s.a)(),...e.components};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},75251:(e,o,t)=>{var n=t(67294),s=Symbol.for("react.element"),r=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function u(e,o,t){var n,r={},u=null,l=null;for(n in void 0!==t&&(u=""+t),void 0!==o.key&&(u=""+o.key),void 0!==o.ref&&(l=o.ref),o)a.call(o,n)&&!c.hasOwnProperty(n)&&(r[n]=o[n]);if(e&&e.defaultProps)for(n in o=e.defaultProps)void 0===r[n]&&(r[n]=o[n]);return{$$typeof:s,type:e,key:u,ref:l,props:r,_owner:i.current}}o.Fragment=r,o.jsx=u,o.jsxs=u},85893:(e,o,t)=>{e.exports=t(75251)},11151:(e,o,t)=>{t.d(o,{Z:()=>i,a:()=>a});var n=t(67294);const s={},r=n.createContext(s);function a(e){const o=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function i(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),n.createElement(r.Provider,{value:o},e.children)}}}]);