dayzed is a React library providing headless primitives for building highly customizable, accessible (WAI-ARIA compliant) date picker components. It focuses on managing date logic and user interactions, exposing control through a custom `useDayzed` hook or a `Dayzed` render prop component, along with "prop getters" for flexible rendering. The current stable version is 3.2.3, actively maintained with recent updates for React 18 compatibility. Unlike opinionated date picker libraries, dayzed delegates all UI rendering to the developer, offering maximum flexibility in styling and layout, making it a strong choice for projects requiring bespoke date picker designs and strict accessibility control. Releases are feature-driven, with significant updates historically around React version support and API evolution (e.g., from render props to hooks). This approach significantly differentiates it from solutions that bundle UI, requiring extensive options for customization and often leading to less flexible APIs. The library emphasizes a lean core, providing only the necessary logic for date manipulation and state management, leaving visual implementation entirely to the consumer.
npm install dayzedVerified import paths — ran on the pinned version, not inferred.
This code demonstrates the basic usage of the `useDayzed` hook to create a multi-month calendar. It shows how to render month navigation buttons and individual date cells, handle date selection, and apply basic styling based on date properties like `selected`, `today`, and `selectable`.
Migrate to the `useDayzed` hook for new implementations. Replace `fillAdjacentMonths` with `showOutsideDays` if previously used. Ensure `react` is at least `16.8.0`.
Replace `fillAdjacentMonths` with `showOutsideDays` in your component props. If on `v3.0.0` or later, ensure you are using `showOutsideDays`.
For `dayzed` versions between `2.0.1` and `2.x`, ensure `date-fns` is installed as a dependency (`npm install date-fns`). For `v3.0.0` and later, `date-fns` is no longer a required peer dependency.
Always use the latest stable version of `dayzed` (currently 3.2.3 or newer) to ensure full compatibility with modern React versions like 17 and 18, and avoid `npm install --force` or `--legacy-peer-deps` workarounds.
Ensure `useDayzed` is called within a React function component or another custom hook. Confirm your `react` package is at least version `16.8.0`.
Add a conditional check for `calendars` being defined and having length before attempting to map over it, e.g., `if (!calendars || calendars.length === 0) return null;`
Ensure you are using `import { useDayzed } from 'dayzed'` for named exports with modern module bundlers. For CommonJS environments, ensure proper transpilation or consider using an older version if available in CommonJS format, or switch to ESM.