Registry / web-framework / react-flatpickr

react-flatpickr

library4.0.11jsnpmunverified

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.

web-framework

npm install react-flatpickr

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-FLATPICKR

react-flatpickr

web-frameworkjavascriptv4.0.11

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Flatpickr

✓ import Flatpickr from 'react-flatpickr';

✗ import { Flatpickr } from 'react-flatpickr'; const Flatpickr = require('react-flatpickr');

Flatpickr is exported as a default export. CommonJS require() may work but is not the recommended or modern approach for React components.

flatpickr styles

✓ import 'flatpickr/dist/themes/material_green.css';

✗ import 'react-flatpickr/dist/flatpickr.css';

Styles are sourced directly from the `flatpickr` package, not `react-flatpickr`. Ensure you import the desired theme's CSS.

DateTimePickerHandle

✓ import type { DateTimePickerHandle } from 'react-flatpickr';

✗ import { DateTimePickerHandle } from 'react-flatpickr';

This type is for TypeScript users to correctly type the ref when accessing the underlying flatpickr instance via `useImperativeHandle`. It's a type-only import.

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.

import React, { useState, useRef, useEffect } from 'react'; import Flatpickr from 'react-flatpickr'; import 'flatpickr/dist/themes/material_green.css'; // Don't forget to import styles! interface AppProps {} const App: React.FC<AppProps> = () => { const [date, setDate] = useState(new Date()); const fpRef = useRef<Flatpickr>(null); useEffect(() => { // You can access the Flatpickr instance directly via the ref if (fpRef.current && fpRef.current.flatpickr) { console.log('Flatpickr instance loaded:', fpRef.current.flatpickr.config.locale); } }, [fpRef.current]); return ( <div style={{ padding: '20px' }}> <h1>React Flatpickr Example</h1> <p>Selected Date: {date.toLocaleDateString()}</p> <Flatpickr ref={fpRef} data-enable-time value={date} options={{ dateFormat: 'Y-m-d H:i', minDate: 'today', altInput: true, altFormat: 'F j, Y h:i K' }} onChange={([selectedDate]) => { if (selectedDate) { setDate(selectedDate); } }} /> <p>This example demonstrates basic usage, including state management for the date, custom options, and accessing the underlying Flatpickr instance via a ref.</p> </div> ); }; export default App;

Debug

Known issues

breakingThe way refs are handled and exposed for the underlying `flatpickr` instance changed significantly. Prior to v4.0.4, direct ref access to `fp.current.flatpickr` was common. From v4.0.4 onwards, `useImperativeHandle` is used, and for TypeScript, the `DateTimePickerHandle` type should be used for the ref.

fix

For direct instance access with `useRef`, ensure the ref type is `React.RefObject<Flatpickr>` for the component itself, or `DateTimePickerHandle` if using `useImperativeHandle` with a custom component. The `flatpickr` instance is available at `ref.current.flatpickr`.

affects: >=4.0.4

gotchaStyles for Flatpickr are not bundled with `react-flatpickr` and must be imported separately. Forgetting this will result in an unstyled date picker.

fix

Add an import statement for a Flatpickr theme CSS file, e.g., `import 'flatpickr/dist/themes/material_green.css';` in your main application or component file.

affects: >=1.0.0

breakingThe internal ref type for `flatpickr` was switched from `RefObject` to `Ref` in v4.0.10. While primarily an internal change, it might affect advanced TypeScript users or those creating custom wrappers around `react-flatpickr` that interact with its internal ref handling.

fix

Update TypeScript definitions or custom component logic to align with `Ref` type usage if directly manipulating `react-flatpickr`'s internal ref structure.

affects: >=4.0.10

gotchaThe `flatpickr` library itself is a peer dependency and must be installed separately alongside `react-flatpickr`. Failing to install `flatpickr` will lead to runtime errors.

fix

Run `npm install flatpickr` or `yarn add flatpickr` in your project.

affects: >=1.0.0

gotchaVersions prior to `v4.0.6` had reported issues with default imports and module resolution, which could lead to bundling problems or `TypeError: Cannot read property 'default' of undefined`.

fix

Update to `react-flatpickr` version `4.0.6` or higher to resolve known module resolution and default import errors.

affects: <4.0.6

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'flatpickr/dist/themes/material_green.css' in '...' OR Cannot find module 'flatpickr/dist/flatpickr.css'

The required Flatpickr CSS styles are not imported, or the path is incorrect.

fix

Ensure you have `flatpickr` installed (`npm install flatpickr`) and import a theme stylesheet, e.g., `import 'flatpickr/dist/themes/material_green.css';`.

TypeError: Flatpickr is not a constructor (or similar errors with default exports)

Incorrect import statement for the Flatpickr component, likely trying to destructure a default export or using CommonJS `require()` syntax incorrectly.

fix

Use the correct ESM default import: `import Flatpickr from 'react-flatpickr';`.

Property 'flatpickr' does not exist on type 'ReactFlatpickr'.

When using TypeScript, the ref for the `Flatpickr` component is not correctly typed to expose the `flatpickr` instance.

fix

Type your ref with `React.RefObject<Flatpickr>` (where `Flatpickr` is the imported component) or use `DateTimePickerHandle` if you're using `useImperativeHandle` for custom ref exposure, as shown in the quickstart example.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This usually means `react-flatpickr` failed to load or `Flatpickr` itself is not installed, leading to the component being undefined.

fix

Verify that both `react-flatpickr` and `flatpickr` are correctly installed and that the import `import Flatpickr from 'react-flatpickr';` is resolving correctly.

Upgrade

Version history

4.0.11latest on npm

Audit

Dependencies

reactrequiredThis is a React component wrapper for Flatpickr.

flatpickrrequiredThe core datepicker library wrapped by this component. Must be installed separately.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/haoxins/react-flatpickr ↗

packagehttps://www.npmjs.com/package/react-flatpickr ↗