@highlight-ui/month-navigation NPM

@highlight-ui/month-navigation

Using npm:

npm install @highlight-ui/month-navigation

Using yarn:

yarn add @highlight-ui/month-navigation

Using pnpm:

pnpm install @highlight-ui/month-navigation

In your (S)CSS file:

@import url('@highlight-ui/month-navigation');

Once the package is installed, you can import the library:

import { MonthNavigation } from '@highlight-ui/month-navigation';

Usage

import React from 'react';
import { MonthNavigation } from '@highlight-ui/month-navigation';

export default function MonthNavigationExample() {
  return <MonthNavigation locale="en-GB" />;
}

Props 📜

The MonthNavigation props build upon the ReactDatePicker props

Prop	Type	Required	Default	Description
`size`	`'small', 'medium'`	No	`medium`	Size variant of the component
`onFocus`	`() => void`	No		Callback to be called when the navigation input receives a focus event
`onBlur`	`() => void`	No		Callback to be called when the navigation input receives a blur event
`monthSelectPluginOptions`	`TMonthSelectPluginOptions`	No		Options that will be passed to Flatpickr's monthSelectPlugin
`showTodayButton`	`boolean`	No	`true`	Whether or not to display the current month button
`todayText`	`string`	No	`Today`	Will be rendered as the trigger to navigate to current IRL month
`className`	`string`	No		Allows providing a custom class name to the DIV element that surrounds the text

Custom types 🔠

Type	Values	Description
`TMonthSelectPluginOptions`	"TMonthSelectPluginOptions" props	Used in the `monthSelectPluginOptions` prop

Keyboard Navigation ⌨️

Here are the keyboard shortcuts to help navigate through the month navigation. These keys allow for smooth accessibility and interaction with the month selection:

General Navigation

Key (Mac Shortcut)	Function
`Tab` (`Tab`)	Focus on month navigation components (arrows, trigger and 'Today' button)
`Escape` (`Escape`)	Close the month navigation and return focus to the input trigger.

Within Month navigation

Key (Mac Shortcut)	Function
`Home` (`fn` + `←`)	Focus on the first month (January) of the current year.
`End` (`fn` + `→`)	Focus on the last month (December) of the current year.
`PageUp` (`fn` + `↑`)	Navigate to the previous year.
`PageDown` (`fn` + `↓`)	Navigate to the next year.
`Up Arrow` (`↑`)	Move focus up by 4 months. If focused month is on the top most row, navigate to the corresponding month in the previous year.
`Down Arrow` (`↓`)	Move focus down by 4 months. If focused is on the last row, navigate to the corresponding month in the next year.
`Right Arrow` (`→`)	Move to the next month. If focused on the last month, navigate to the first month of the next year.
`Left Arrow` (`←`)	Move to the previous month. If focused on the first month, navigate to the last month of the previous year.