Simple Year Range Picker Component For React

A simple year range picker component for React.

How to use it:

1. Install and import the year range picker component.

$ npm i react-year-range-picker
import React, { useState } from 'react'
import { YearRangePicker } from 'react-year-range-picker'

2. Create a basic year range picker and specify the min/max years:

interface IYearRange {
  startYear: number
  endYear: number
const Basic = () => {
  const [yearRange, setYearRange] = useState<IYearRange>()
  return (
      <h2>Basic Usage</h2>
        minYear={new Date().getFullYear() - 2}
        maxYear={new Date().getFullYear() + 2}
        onSelect={(startYear: number, endYear: number) => {
          setYearRange({ startYear, endYear })
      <span style={{ marginLeft: '16px' }}>
        Selected Years : {yearRange?.startYear} - {yearRange?.endYear}
export default Basic

3. All available component props to customize the year range picker.

interface YearRangePickerProps {
  minYear: number
  maxYear: number
  startYear?: number | undefined
  endYear?: number | undefined
  disable?: boolean
  style?: React.CSSProperties
  classNames?: string
  spacer?: string
  startText?: string
  endText?: string
  selectedColor?: string
  onSelect?: (startYear: number, endYear: number) => void


Simple Year Range Picker Component

Download Details:

Author: hzengindev

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Add Comment