{"library":"react-calendar","title":"React Calendar Component","description":"React Calendar is a highly customizable and internationalization-friendly date picker component for React applications. Currently stable at version 6.0.1, it receives frequent updates that include new features, bug fixes, and performance improvements. It leverages modern React features like the new JSX transform and is distributed exclusively as an ES module since version 6.0.0. Key differentiators include its robust TypeScript support, extensibility through props like `tileClassName` and `tileContent`, and recent adoption of npm trusted publishing and immutable releases for enhanced supply chain security, aiming to improve overall supply chain security and reliability for users.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-calendar"],"cli":null},"imports":["import Calendar from 'react-calendar';","import { CalendarType } from 'react-calendar';","import { TileArgs } from 'react-calendar';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport Calendar from 'react-calendar';\nimport 'react-calendar/dist/Calendar.css';\n\ntype ValuePiece = Date | null;\ntype Value = ValuePiece | [ValuePiece, ValuePiece];\n\nfunction MyCalendar() {\n  const [value, onChange] = useState<Value>(new Date());\n\n  return (\n    <div className=\"my-calendar-container\">\n      <h1>Select a Date</h1>\n      <Calendar onChange={onChange} value={value} />\n      {value instanceof Date && value && (\n        <p>Selected date: {value.toLocaleDateString()}</p>\n      )}\n      {Array.isArray(value) && value[0] instanceof Date && value[1] instanceof Date && (\n        <p>Selected range: {value[0].toLocaleDateString()} - {value[1].toLocaleDateString()}</p>\n      )}\n    </div>\n  );\n}\n\nexport default MyCalendar;","lang":"typescript","description":"Demonstrates a basic interactive calendar with state management for date selection, supporting both single date and range selection.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}