Year Picker React Component

A simple and customizable year picker React component.

Installation

Install the single-year-picker npm package in your React project using:

npm install single-year-picker

import YearPicker from 'single-year-picker';

const YourApp = () => {
  const [selectedYear, setSelectedYear] = useState(null);

  const handleYearSelect = (year) => {
    setSelectedYear(year);
  };

  return (
    <div>
      <YearPicker
        onSelect={handleYearSelect}
        defaultValue={selectedYear}
        onSelect={handleYearChange}
        minYear={1990}
        maxYear={2022}
        value={selectedYear}
        colors={{
          dropdownButtonColor: "black",
          navigationButtonColor: "black",
          borderColor: "green",
          gridBorderColor: "skyblue",
          selectedColor: "green",
          disabledColor: "#A9A9A9",
        }}
      />
    </div>
  );
};

export default YourApp;

Props

onSelect: Callback function triggered when a year is selected.
minYear: Minimum selectable year.
maxYear: Maximum selectable year.
defaultValue: Default value to set the initial selected year.
colors: Object to customize colors for the component (optional).
dropdownButtonColor: Color for the dropdown button.
navigationButtonColor: Color for the navigation buttons (next, prev).
borderColor: Color for borders.
selectedColor: Color for the selected year.
disabledColor: Color for disabled years.
gridBackgroundColor: Background color for the grid.