React Lite Month Picker

Simple, modern and customizable month picker component for ReactJS.

Install

Using npm:

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

Usage


import { useState } from 'react';
import { MonthPicker, MonthInput } from 'react-lite-month-picker';

function Example() {
  const [selectedMonthData, setSelectedMonthData] = useState({
    month: 9,
    year: 2023,
  });
  const [isPickerOpen, setIsPickerOpen] = useState(false);

  return (
    <>
      <div>
        <MonthInput
          selected={selectedMonthData}
          setShowMonthPicker={setIsPickerOpen}
          showMonthPicker={isPickerOpen}
        />
        {isPickerOpen ? (
          <MonthPicker
            setIsOpen={setIsPickerOpen}
            selected={selectedMonthData}
            onChange={setSelectedMonthData}
          />
        ) : null}
      </div>
    </>
  );
}

export default Example;

Selected month data

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 with onChangeevent.

Customization

Customize theMonthPickercomponent by passing the following props to it.

Prop	Description	Default
bgColorMonthActive	Background color of the active month. Accepts any valid CSS color value.	#4ea3983e
bgColorMonthHover	Background color of the hovered month. Accepts any valid CSS color value.	#f4f4f4
borderRadiusMonth	Border radius of the month. Accepts any valid CSS border-radius value.	7px
bgColorPicker	Background color of the month picker. Accepts any valid CSS color value.	#fff
textColor	Color of the text. Accepts any valid CSS color value.	#000

Customize the MonthInputcomponent by passing props to it.

Prop	Description	Default
bgColor	Background color of the input element. Accepts any valid CSS color value.	#fff
bgColorHover	Background color of the input element on hover. Accepts any valid CSS color value.	#fff
textColor	Text color of the input element. Accepts any valid CSS color value.	#000

Examples & Demos

Click the images below to see demos on CodeSandbox.

Default

Customized

License

React Lite Month Picker is licensed under the MIT license. Check the license file on Github for more information.