$ show Hacker0x01/react-datepicker
This repository is a highly configurable, feature-rich React date picker component library published as `react-datepicker`. It provides a single entry point (`DatePicker`) that supports single date, date range, multiple dates, week, month, quarter, and year picker modes, along with time selection, timezone handling, localization via `date-fns`, and extensive keyboard navigation and ARIA accessibility. Internally, the library uses a class-component architecture with a clear separation of concerns: a `Calendar` component manages month/year navigation, `Month` renders days or month/quarter grids, `Day` handles individual cell rendering with selection and focus management, and `Time`/`InputTime` handle time input. Positioning of the calendar popover is delegated to `@floating-ui/react` via a `withFloating` HOC, and rendering can be redirected to a portal (including shadow DOM) for overlay scenarios. The component exposes over 60 props for customization, including custom input elements, headers, and day rendering. The library is mature and widely adopted, with a comprehensive test suite (Jest + React Testing Library) covering interactions, keyboard navigation, edge cases, and accessibility (axe tests). The build pipeline uses Rollup to produce UMD, CJS, and ES module bundles, and CSS is provided in both standard and CSS Modules variants.
The LLM identified 4 files worth highlighting for reuse:
A Higher-Order Component (HOC) that wraps any React component with positioning logic from `@floating-ui/react`. It handles reference and floating element refs, computes position, and passes `x`, `y`, `strategy`, and `floatingRef` to the wrapped component. This pattern is reusable for any popover, tooltip, or dropdown that needs dynamic screen-based positioning, and it cleanly decouples positioning from the presentational component.
A reusable container component that detects clicks outside of its children. It accepts an `onClickOutside` callback and an `ignoreClass` string to exclude certain elements from triggering the event. The implementation is self-contained, does not rely on internal library state, and can be extracted into any project requiring click-outside detection (e.g., dropdowns, modals, popovers). Uses `mousedown` and `touchstart` events for reliable detection.
A focus-trapping component that loops keyboard Tab navigation within its children, preventing focus from leaving the container. It manages the `tabIndex` of a sentinel element and listens for `Tab` key presses on currently focused children. This pattern is essential for modal dialogs and popover accessibility, and the implementation is generic enough to be reused in any React application needing focus confinement.
A centralized module of pure functions for date operations, built on top of `date-fns`. It includes parsing, formatting, comparison, disabling logic (by date, month, year, intervals), range checks, week number calculation, and timezone helpers (using optional `date-fns-tz`). Functions like `isDayDisabled`, `getEffectiveMinDate`, `safeDateFormat`, and `isMonthDisabled` accept a unified options object, making the API consistent and testable. This module could be extracted for any JavaScript or React project requiring date validation and formatting, independent of the date picker UI.