{"library":"react-date-picker","title":"React Date Picker Component","description":"react-date-picker is a flexible date picker component for React applications, providing robust functionalities for selecting dates, months, and years. Its current stable version is 12.0.2. The package maintains an active release cadence, with minor and patch updates occurring frequently to address bugs and improve developer experience, while major versions are released less often, coinciding with significant architectural shifts or React version compatibility updates. Key differentiators include its lightweight nature, comprehensive TypeScript support, enhanced prop documentation via JSDoc for improved IDE assistance, and its transition to being an ESM-only package since v12.0.0, aligning with modern JavaScript module standards. It supports React versions 16.8.0 through 19.0.0 and mandates the New JSX Transform since v11.0.0.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-date-picker"],"cli":null},"imports":["import DatePicker from 'react-date-picker';","import type { Value } from 'react-date-picker';","import 'react-date-picker/dist/DatePicker.css';\nimport 'react-calendar/dist/Calendar.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport DatePicker from 'react-date-picker';\nimport 'react-date-picker/dist/DatePicker.css';\nimport 'react-calendar/dist/Calendar.css';\n\ntype ValuePiece = Date | null;\ntype Value = ValuePiece | [ValuePiece, ValuePiece];\n\nfunction MyDatePickerComponent() {\n  const [value, onChange] = useState<Value>(new Date());\n\n  return (\n    <div>\n      <h1>Date Selection Example</h1>\n      <p>Select a date using the React Date Picker:</p>\n      <DatePicker onChange={onChange} value={value} />\n      {value && Array.isArray(value) ? (\n        <p>Selected date range: {value[0]?.toDateString() || 'None'} - {value[1]?.toDateString() || 'None'}</p>\n      ) : (\n        <p>Selected date: {value?.toDateString() || 'None'}</p>\n      )}\n      <p>Current value in state: {JSON.stringify(value)}</p>\n    </div>\n  );\n}\n\nexport default MyDatePickerComponent;","lang":"typescript","description":"This quickstart code demonstrates how to integrate `react-date-picker` into a React component, manage its state using `useState`, handle date changes, and correctly import required styles.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}