flatpickr for React
npm install react-flatpickr[![NPM version][npm-img]][npm-url]
[![License][license-img]][license-url]
[![Dependency status][david-img]][david-url]
Flatpickr for React.
- Installation
- Usage
- Basic props
- defaultValue
- value
- children
- className
- Event handlers
- Advanced props
- Troubleshooting
This package can be install with yarn or npm
npm
``bash`
npm install --save react-flatpickr
yarn
`bash`
yarn add react-flatpickr
`jsx
// Keep in mind that these are the styles from flatpickr package
// See troubleshooting section in case you have problems importing the styles
import "flatpickr/dist/themes/material_green.css";
import Flatpickr from "react-flatpickr";
import { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
date: new Date()
};
}
render() {
const { date } = this.state;
return (
value={date}
onChange={([date]) => {
this.setState({ date });
}}
/>
);
}
}
`
> string | optional
This is the default value that will be passed to the inner input
> string || array || object || number | optional
Same as below
> Object | optional
- Flatpickr options: you can pass all Flatpickr parameters here.Flatpickr
- All [hooks][hooks] can be passed within this option too.
_Example_:
`jsx`
> node | optional
This option is closely related with the wrap option from Flatpickr, please refer to the former link for more information.
> string | optional
Custom className that will be applied to the inner input element. In case you need to modify the rendered input styles this is the prop you should use.
The following props are provided in order to customize the Flatpickr's functions default behaviour. Please refer to the Events & Hooks section from Flatpickr library.
> function | optional
> function | optional
> function | optional
> function | optional
> function | optional
> function | optional
> function | optional
> function | optional
> function | optional
> function | optional
Use this prop if you want to render your custom component, this is a Render props pattern.
_Example usage_:
`jsx
import React from 'react';
import Flatpickr from 'react-flatpickr';
const CustomInput = ({ value, defaultValue, inputRef, ...props }) => {
return ;
};
export default function App {
return (
({defaultValue, value, ...props}, ref) => {
return
}
}
/>
)
}
`
You can directly manipulate the flatpickr instance using the flatpickr property on the component.
_Example_:
`js
import React, { useRef } from "react";
import Flatpickr from "react-flatpickr";
import "flatpickr/dist/flatpickr.css";
export default function App() {
const fp = useRef(null);
return (
Themes
Please import themes directly from the
flatpickr dependency.Troubleshooting
#### Help, the Date Picker doesn't have any styling!
> In most cases, you should just be able to
import 'flatpickr/dist/themes/airbnb.css', but in some cases npm or yarn may install flatpickr in node_modules/react-flatpickr/node_modules/flatpickr. If that happens, removing your node_modules dir and reinstalling should put flatpickr in the root node_modules dir, or you can import from react-flatpickr/node_modules/flatpickr manually.#### The Date Picker closes after a value is selected
This occurs due to the date picker being created and destroyed on each render. To avoid this, you need
to ensure that any props and options that are passed in are memoized with
useMemo. You should also
ensure that your event handlers have stable references by wrapping them in useCallback`.MIT
[npm-img]: https://img.shields.io/npm/v/react-flatpickr.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-flatpickr
[travis-img]: https://img.shields.io/travis/coderhaoxin/react-flatpickr.svg?style=flat-square
[travis-url]: https://travis-ci.org/coderhaoxin/react-flatpickr
[codecov-img]: https://img.shields.io/codecov/c/github/coderhaoxin/react-flatpickr.svg?style=flat-square
[codecov-url]: https://codecov.io/github/coderhaoxin/react-flatpickr?branch=master
[license-img]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
[license-url]: http://opensource.org/licenses/MIT
[david-img]: https://img.shields.io/david/coderhaoxin/react-flatpickr.svg?style=flat-square
[david-url]: https://david-dm.org/coderhaoxin/react-flatpickr
[hooks]: https://chmln.github.io/flatpickr/events/#hooks