UNPKG

digipin-reactjs

Version:

React hooks and components for integrating DIGIPIN (Indian Postal Digital PIN) geocoding into React apps. Includes hooks, prebuilt UI, and helpers for seamless integration.

150 lines (141 loc) 7.19 kB
'use strict'; var jsxRuntime = require('react/jsx-runtime'); var react = require('react'); var digipinjs = require('digipinjs'); function useDigiPin() { const [input, setInput] = react.useState(''); const [result, setResult] = react.useState(null); const [loading, setLoading] = react.useState(false); const [error, setError] = react.useState(null); const search = react.useCallback(async (query) => { setLoading(true); setError(null); try { let res; // If input looks like lat,lon, encode to DIGIPIN const trimmed = query.trim(); if (/^-?\d+(\.\d+)?\s*,\s*-?\d+(\.\d+)?$/.test(trimmed)) { const [latStr, lonStr] = trimmed.split(','); const lat = Number(latStr.trim()); const lon = Number(lonStr.trim()); if (isNaN(lat) || isNaN(lon)) { throw new Error('Invalid latitude or longitude'); } if (lat < -90 || lat > 90) { throw new Error('Latitude must be between -90 and 90'); } if (lon < -180 || lon > 180) { throw new Error('Longitude must be between -180 and 180'); } res = digipinjs.getDigiPin(lat, lon); } else { // Otherwise, decode as DIGIPIN if (!trimmed) { throw new Error('Input cannot be empty'); } res = digipinjs.getLatLngFromDigiPin(trimmed); } setResult(res); } catch (e) { setError(e.message || 'Unknown error'); setResult(null); } finally { setLoading(false); } }, []); return { input, setInput, result, loading, error, search }; } const DigiPinInput = () => { const { input, setInput, result, loading, error, search } = useDigiPin(); const handleSubmit = (e) => { e.preventDefault(); search(input); }; return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [jsxRuntime.jsx("input", { type: "text", value: input, onChange: e => setInput(e.target.value), placeholder: "Enter DigiPin query" }), jsxRuntime.jsx("button", { type: "submit", disabled: loading, children: loading ? 'Searching...' : 'Search' }), error && jsxRuntime.jsx("div", { style: { color: 'red' }, children: error }), result && (jsxRuntime.jsx("pre", { children: JSON.stringify(result, null, 2) }))] })); }; function useLatLonToDigiPin() { const [lat, setLat] = react.useState(''); const [lon, setLon] = react.useState(''); const [digipinResult, setDigiPinResult] = react.useState(null); const [loading, setLoading] = react.useState(false); const [error, setError] = react.useState(null); const convert = react.useCallback(() => { setLoading(true); setError(null); try { const latNum = Number(lat.trim()); const lonNum = Number(lon.trim()); if (isNaN(latNum) || isNaN(lonNum)) { throw new Error('Invalid latitude or longitude'); } if (latNum < -90 || latNum > 90) { throw new Error('Latitude must be between -90 and 90'); } if (lonNum < -180 || lonNum > 180) { throw new Error('Longitude must be between -180 and 180'); } const result = digipinjs.getDigiPin(latNum, lonNum); setDigiPinResult(result); } catch (e) { setError(e.message || 'Unknown error'); setDigiPinResult(null); } finally { setLoading(false); } }, [lat, lon]); return { lat, setLat, lon, setLon, digipinResult, loading, error, convert }; } function useDigiPinToLatLon() { const [digipinInput, setDigiPinInput] = react.useState(''); const [latLonResult, setLatLonResult] = react.useState(null); const [loading, setLoading] = react.useState(false); const [error, setError] = react.useState(null); const convert = react.useCallback(() => { setLoading(true); setError(null); try { const input = digipinInput.trim(); if (!input) { throw new Error('DIGIPIN cannot be empty'); } const result = digipinjs.getLatLngFromDigiPin(input); setLatLonResult({ lat: result.latitude, lon: result.longitude }); } catch (e) { setError(e.message || 'Unknown error'); setLatLonResult(null); } finally { setLoading(false); } }, [digipinInput]); return { digipinInput, setDigiPinInput, latLonResult, loading, error, convert }; } const LatLonToDigiPinInput = () => { const { lat, setLat, lon, setLon, digipinResult, loading, error, convert } = useLatLonToDigiPin(); const handleSubmit = (e) => { e.preventDefault(); convert(); }; return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { marginBottom: 24 }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { type: "text", value: lat, onChange: e => setLat(e.target.value), placeholder: "Latitude", style: { marginRight: 8 } }), jsxRuntime.jsx("input", { type: "text", value: lon, onChange: e => setLon(e.target.value), placeholder: "Longitude", style: { marginRight: 8 } }), jsxRuntime.jsx("button", { type: "submit", disabled: loading, children: loading ? 'Converting...' : 'Convert to DIGIPIN' })] }), error && jsxRuntime.jsx("div", { style: { color: 'red' }, children: error }), digipinResult && (jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [jsxRuntime.jsx("strong", { children: "DIGIPIN:" }), " ", digipinResult] }))] })); }; const DigiPinToLatLonInput = () => { const { digipinInput, setDigiPinInput, latLonResult, loading, error, convert } = useDigiPinToLatLon(); const handleSubmit = (e) => { e.preventDefault(); convert(); }; return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { marginBottom: 24 }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { type: "text", value: digipinInput, onChange: e => setDigiPinInput(e.target.value), placeholder: "DIGIPIN", style: { marginRight: 8 } }), jsxRuntime.jsx("button", { type: "submit", disabled: loading, children: loading ? 'Converting...' : 'Convert to Lat/Lon' })] }), error && jsxRuntime.jsx("div", { style: { color: 'red' }, children: error }), latLonResult && (jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [jsxRuntime.jsx("strong", { children: "Latitude:" }), " ", latLonResult.lat, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "Longitude:" }), " ", latLonResult.lon] }))] })); }; exports.DigiPinInput = DigiPinInput; exports.DigiPinToLatLonInput = DigiPinToLatLonInput; exports.LatLonToDigiPinInput = LatLonToDigiPinInput; exports.useDigiPin = useDigiPin; exports.useDigiPinToLatLon = useDigiPinToLatLon; exports.useLatLonToDigiPin = useLatLonToDigiPin; //# sourceMappingURL=index.js.map