{"library":"react-flatpickr","title":"React Flatpickr Component","description":"react-flatpickr is a React component that wraps the popular Flatpickr date and time picker library, providing a declarative way to integrate it into React applications. The current stable version is v4.0.11, with development showing consistent maintenance releases, primarily focusing on TypeScript support, module resolution fixes, and improving ref handling. Key differentiators include its lightweight nature (inheriting from Flatpickr), comprehensive prop-based configuration aligning with Flatpickr's extensive options and event hooks, and support for render props for highly customizable input elements. It ships with TypeScript types, making it well-suited for modern React projects using TypeScript. Unlike some heavier date pickers, it aims for simplicity and performance by leveraging Flatpickr's efficient core.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-flatpickr"],"cli":null},"imports":["import Flatpickr from 'react-flatpickr';","import 'flatpickr/dist/themes/material_green.css';","import type { DateTimePickerHandle } from 'react-flatpickr';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useRef, useEffect } from 'react';\nimport Flatpickr from 'react-flatpickr';\nimport 'flatpickr/dist/themes/material_green.css'; // Don't forget to import styles!\n\ninterface AppProps {}\n\nconst App: React.FC<AppProps> = () => {\n  const [date, setDate] = useState(new Date());\n  const fpRef = useRef<Flatpickr>(null);\n\n  useEffect(() => {\n    // You can access the Flatpickr instance directly via the ref\n    if (fpRef.current && fpRef.current.flatpickr) {\n      console.log('Flatpickr instance loaded:', fpRef.current.flatpickr.config.locale);\n    }\n  }, [fpRef.current]);\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>React Flatpickr Example</h1>\n      <p>Selected Date: {date.toLocaleDateString()}</p>\n      <Flatpickr\n        ref={fpRef}\n        data-enable-time\n        value={date}\n        options={{ \n          dateFormat: 'Y-m-d H:i',\n          minDate: 'today',\n          altInput: true,\n          altFormat: 'F j, Y h:i K'\n        }}\n        onChange={([selectedDate]) => {\n          if (selectedDate) {\n            setDate(selectedDate);\n          }\n        }}\n      />\n      <p>This example demonstrates basic usage, including state management for the date, custom options, and accessing the underlying Flatpickr instance via a ref.</p>\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"This quickstart demonstrates how to integrate react-flatpickr into a functional React component with state management, custom Flatpickr options, and how to access the underlying Flatpickr instance via a ref for advanced manipulations.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}