Repository files navigation

Simple, modern and customizable month picker component for ReactJS.

😀Simple and easy to use.
🌶Tiny: Minzipped size less than 1kB.
🧁Highly customizable: Easily make it fit to your designs.
📅Accessible: Fully accessible with keyboard navigation. Developed according the WCAG 2.1 accesibility guidelines.
🇫🇮41 languages supported.
🚫0 Dependencies: No surprise dependencies included.

Using npm:

npm install react-lite-month-picker --save

Using yarn:

yarn add react-lite-month-picker

Using bun:

bun install react-lite-month-picker

import{useState}from'react';import{MonthPicker,MonthInput}from'react-lite-month-picker';functionExample(){const[selectedMonthData,setSelectedMonthData]=useState({month:9,year:2023,});const[isPickerOpen,setIsPickerOpen]=useState(false);return(<><div><MonthInputselected={selectedMonthData}setShowMonthPicker={setIsPickerOpen}showMonthPicker={isPickerOpen}/>{isPickerOpen ?(<MonthPickersetIsOpen={setIsPickerOpen}selected={selectedMonthData}onChange={setSelectedMonthData}/>) :null}</div></>);}exportdefaultExample;

Currently selected month data is an object with the following structure:

{month:9,year:2023,monthName:'September',monthShort:'Sep'}

It will get saved on set parent component state withonChange event.

You can customize theMonthPicker component styles by passing props to it.

You can customize theMonthInput component styles by passing props to it.

See full list of supported languages on thewebsite.

MIT ©henripar