Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/coderhaoxin/react-flatpickr

flatpickr for React
https://github.com/coderhaoxin/react-flatpickr

flatpickr hacktoberfest react

Last synced: about 1 month ago
JSON representation

flatpickr for React

Awesome Lists containing this project

README 

        
[![NPM version][npm-img]][npm-url]

[![License][license-img]][license-url]

[![Dependency status][david-img]][david-url]



# react-flatpickr



[Flatpickr](https://github.com/chmln/flatpickr) for React.



## Table of contents



- [Installation](#installation)

- [Usage](#usage)

- [Basic props](#basic-props)

  - [defaultValue](#defaultValue)

  - [value](#value)

  - [children](#children)

  - [className](#className)

- [Event handlers](#event-handlers)

- [Advanced props](#advanced-props)

- [Troubleshooting](#troubleshooting)



## Installation



This package can be install with `yarn` or `npm`



`npm`



```bash

npm install --save react-flatpickr

```



`yarn`



```bash

yarn add react-flatpickr

```



## Usage



```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 (

       {

          this.setState({ date });

        }}

      />

    );

  }

}

```



## Basic props



### defaultValue



> `string` | optional



This is the default value that will be passed to the inner input



### value



> `string || array || object || number` | optional



Same as below



### options



> `Object` | optional



- `Flatpickr options`: you can pass all `Flatpickr parameters` [here](https://flatpickr.js.org/options).

- All `Flatpickr` [hooks][hooks] can be passed within this option too.



_*Example*_:



```jsx



```



### children



> `node` | optional



This option is closely related with the [wrap option](https://flatpickr.js.org/examples/#flatpickr-external-elements) from `Flatpickr`, please refer to the former link for more information.



### className



> `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.



## Event handlers



The following `props` are provided in order to customize the `Flatpickr's functions` default behaviour. Please refer to the [Events & Hooks section](https://flatpickr.js.org/events/) from `Flatpickr` library.



### onChange



> `function` | optional



### onOpen: function



> `function` | optional



### onClose: function



> `function` | optional



### onMonthChange: function



> `function` | optional



### onYearChange: function



> `function` | optional



### onReady: function



> `function` | optional



### onValueUpdate: function



> `function` | optional



### onDayCreate: function



> `function` | optional



### onDestroy: function



> `function` | optional



## Advanced props



### render prop



> `function` | optional



Use this `prop` if you want to `render` your custom component, this is a [Render props pattern](https://reactjs.org/docs/render-props.html).



_Example usage_:



```jsx

  import React from 'react';

  import Flatpickr from 'react-flatpickr';



  const CustomInput = ({ value, defaultValue, inputRef, ...props }) => {

    return ;

  };



  export default function App {

    return (

       {

            return 

          }

        }

      />

    )

  }

```



### flatpickr instance



You can directly manipulate the [`flatpickr` instance](https://flatpickr.js.org/instance-methods-properties-elements/) 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 (

      


        

         {

            if (!fp?.current?.flatpickr) return;

            fp.current.flatpickr.clear();

          }}

        >

          Clear

        

      


    );

  }

```



## 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.



## License



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