Focus Management, Floating UI, and Customizable Date Pickers in React

Github repositories

• focus-trap/focus-trap

  focus-trap is a JavaScript library that allows you to trap focus within a specific DOM node. It is particularly useful for creating accessible modals. When a focus trap is activated, the Tab and Shift+Tab keys will cycle through the focusable elements within the trap, preventing focus from leaving. Clicks outside the trap are blocked, and the Escape key can be used to deactivate the trap. The library provides options for customizing the behavior and supports various browsers, with a focus on desktop browsers. You can use it in conjunction with React using the focus-trap-react wrapper or create light wrappers for other frameworks.

• floating-ui/react-popper

  React Popper is a React wrapper for @popperjs/core, providing a way to use Popper.js functionality within React applications. However, please note that this library is currently in maintenance mode. If you're looking for the new Floating UI package with React, visit https://floating-ui.com/docs/react-dom. To install React Popper, you can use npm or Yarn package managers. Make sure to install @popperjs/core in your project for react-popper to work properly. The official Popper website (http://popper.js.org/react-popper) offers comprehensive documentation. If you want to run it locally, clone the repository, install dependencies, and run the demo in development mode.

• gpbl/react-day-picker

  React DayPicker is a versatile date picker component for React that allows users to select days from a monthly calendar. It offers various features such as support for selecting days, ranges, or any other custom selection, localization in multiple languages, keyboard navigation, WAI-ARIA support, and easy integration with input fields. Written in TypeScript, React DayPicker is highly customizable and can be styled to match any design. The installation process involves using npm, pnpm, or yarn. Additionally, the website provides comprehensive documentation, guides, examples, and an API reference for both the latest version and version 7.