Case study
@mmerlone/react-tz-globepicker
Interactive globe picker for React applications that need timezone selection, timezone visualization, or a compact world-time UI.
Role
I designed, implemented, documented, and published this component as the maintainer.
Context
Applications that deal with timezones often need a compact, visual way to pick a timezone instead of scrolling through a long textual list.
Constraints
- Must remain lightweight and tree-shakeable.
- Rendering must stay performant across a large set of countries and timezones.
- The component must be usable with React 19 and TypeScript.
Decisions
- Rendered a globe projection as a lightweight SVG rather than a WebGL or 3D scene.
- Derived timezone data from a compact static dataset instead of a runtime API call.
- Exposed a single controlled component with a stable selection callback.
Trade-offs
- A static SVG globe trades some visual realism for bundle size and rendering speed.
- A single controlled API means callers own their own state management.
Outcome
A small, dependency-light globe picker that renders timezones visually and integrates into React 19 applications without extra runtime cost.