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-pickerimport 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.