March 27, 2026 · 10 min read
3 more native Web APIs that replaced your favorite libraries
How native Dialog, Temporal, and Geolocation APIs replace common modal, date, and location libraries with zero bundle cost.
Admit it, how many "default" packages are still sitting in your package.json purely out of habit? These three APIs handle modals, dates, and location - things we used to throw heavy libraries at (react-modal, Moment.js, IP geolocation services). Each one costs 0 KB, runs natively in the browser engine, and is more reliable than most npm packages.
Here they are with full before/after code examples, browser support, and honest cases when the library is still worth keeping.
1. <dialog> element
Replaces: react-modal, @headlessui/react dialogs, custom modal implementations.
Building a proper modal is surprisingly hard: focus trap, Esc key handling, backdrop, returning focus to the trigger, preventing body scroll, and proper accessibility.
That is why we used to reach for react-modal or Headless UI.
Old react-modal example · ts
import Modal from 'react-modal';
Modal.setAppElement('#root');
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button onClick={() => setIsOpen(true)}>Open modal</button>
<Modal
isOpen={isOpen}
onRequestClose={() => setIsOpen(false)}
contentLabel="Example Modal"
style={{
overlay: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
content: { maxWidth: '500px', margin: 'auto' }
}}
>
<h2>Modal Title</h2>
<p>Some content here</p>
<button onClick={() => setIsOpen(false)}>Close</button>
</Modal>
</>
);
}Native <dialog> in a few lines · html
<button onclick="document.getElementById('my-dialog').showModal()">
Open modal
</button>
<dialog id="my-dialog">
<h2>Modal Title</h2>
<p>Some content here</p>
<button onclick="this.closest('dialog').close()">Close</button>
</dialog>Modern JS version · ts
const dialog = document.getElementById('my-dialog');
dialog.showModal(); // modal (blocks page)
dialog.show(); // non-modal
dialog.close('saved'); // pass return valueStyling · css
dialog {
max-width: 500px;
border: none;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}Get return value · ts
dialog.addEventListener('close', () => {
console.log(dialog.returnValue); // "saved", "cancelled", etc.
});- Browser support: All major browsers since March 2022 (Chrome 37+, Firefox 98+, Safari 15.4+).
- Libraries still win only for complex design systems needing custom open/close animations or React portal tricks.
2. Temporal API
Replaces: Moment.js, date-fns, Day.js, Luxon.
The old Date object has been broken since day one: mutable, 0-based months, no timezone support, inconsistent parsing across browsers.
Problems with legacy Date · ts
// January is 0, not 1!
const date = new Date(2025, 1, 14); // February 14
// Mutates the original object
date.setMonth(11); // now it's December
// Timezone hell
new Date('2025-02-14'); // different results in different browsersTemporal (clean, immutable, modern) · ts
// PlainDate — just a date
const date = Temporal.PlainDate.from('2025-02-14');
// Returns a new object — original is untouched
const later = date.add({ months: 3 }); // 2025-05-14
console.log(date.toString()); // still "2025-02-14"
// Proper timezones
const meeting = Temporal.ZonedDateTime.from('2025-02-14T10:00[America/New_York]');
const inLagos = meeting.withTimeZone('Africa/Lagos');
console.log(inLagos.toString()); // "2025-02-14T16:00:00+01:00[Africa/Lagos]"
// Duration math
const start = Temporal.PlainDate.from('2025-01-01');
const end = Temporal.PlainDate.from('2025-03-15');
const diff = start.until(end);
console.log(diff.toString()); // "P2M14D"- Temporal gives separate types: PlainDate, PlainTime, PlainDateTime, ZonedDateTime, Instant.
- Browser support (2026): Firefox 139+ (May 2025), Chrome 144+ (Jan 2026). Safari and Edge still missing.
- Use @js-temporal/polyfill for production where needed.
- date-fns / Day.js are still the safest choice if you need 100% cross-browser support without polyfills.
3. Geolocation API
Replaces: IP geolocation services, geoip-lite, MaxMind, ipapi.co, etc.
Most apps still call third-party IP APIs for location: inaccurate city-level data, VPN issues, paid plans, and extra HTTP requests.
Old IP-based approach · ts
const res = await fetch('https://ipapi.co/json/');
const data = await res.json();
console.log(data.city); // "Lagos" (maybe)
console.log(data.latitude); // ~6.45
console.log(data.longitude); // ~3.39Native Geolocation API · ts
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position.coords.latitude); // 6.5244
console.log(position.coords.longitude); // 3.3792
console.log('Accuracy:', position.coords.accuracy + ' meters');
},
(error) => {
console.error('Location access denied:', error.message);
},
{ enableHighAccuracy: true }
);Continuous tracking · ts
const watchId = navigator.geolocation.watchPosition(
(position) => {
updateMap(position.coords.latitude, position.coords.longitude);
},
(error) => console.error(error),
{ enableHighAccuracy: true }
);
// Stop tracking
navigator.geolocation.clearWatch(watchId);- Browser support: All major browsers for years (HTTPS only).
- IP geolocation is still useful when you need silent background detection (for example default currency/language) without asking user permission.
Conclusion
Before every npm install, ask yourself one simple question: Does the browser already do this natively?
These three APIs - <dialog>, Temporal, and Geolocation - are perfect examples of how far the platform has come. They give you better performance, zero bundle impact, and future-proof code.
Which of these have you already switched to? Or which one are you still hesitating on?
Final take
Drop your experience (wins or remaining pain points) in the comments. #JavaScript #WebDevelopment #Frontend #WebAPIs #Performance #React #TypeScript #CleanCode #Browser #FrontendDevelopment #Geolocation #TemporalAPI