rescript-react-flatpickr
Rescript binding for React Flatpickr.
Table of Contents
Installation
Run the following in your project:
npm install rescript-react-flatpicker --saveThen, add rescript-react-flatpickr in bsconfig.json:
-- "bs-dependencies": [],
++ "bs-dependencies": ["rescript-react-flatpickr"],This package includes required peer dependencies and therefore is the only package required to use flatpickr in your own rescript project.
Usage
Because accepting different types for a single prop is not type safe these bindings use polymorphic variants instead to represent each one of the possible types:
@react.component
let make = () =>
<Flatpickr value=#date(Js.Date.now()) />;Basic props
All props are optional
defaultValue
string This will be passed to the inner input
value
This can either be string, array(string), Js.Date.t or array(Js.Date.t) you need to use
polymorphic variants for these to be typesafe:
-
#str - When you need values to be a
string -
#strs - When you need values to be
array(string) -
#date - When you need Values to be
Js.Date.t -
#dates - When you need values to be
array(Js.Date.t)
You use them by wrapping your value in the right variant like this:
<Flatpickr value=#str("2020-06-12") />options
Js.t({..}) we provide a function that will help you generate these options for you FlatpickrOptions.make
all argument are optional and those not set will be set to flatpickr.js defaults.
-
Flatpickr options: you can pass allFlatpickr parametershere. - All
Flatpickr[hooks][hooks] can be passed within this option too.
Example:
@react.component
let make = () => {
let today = Js.Date.now();
let daysFromNow = today -> Js.Date.fromFloat
<Flatpickr
options={
FlatpickrOptions.make(
~dateFormat="l, d/m/Y",
~maxDate=#date(daysFromNow),
(),
)}
value=today
/>;
};children
React.element this prop is closely related with the wrap option
from Flatpickr, please refer to the former link for more information.
className
string This class will be applied to the inner <input /> element.
Event handlers
(Value.t, string) => unit every event handler prop has this type.
-
Value.t- first arugment is anarray(Js.Date.t)representing selected dates, if no dates have been selected array will be empty. -
string- second argument is a representation of the latest selected date as a string formatted by thedateFormat(see options section).
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.
Note: Event handlers for flatpickr.js have a third argument which is a flatpickr instance we've
ommitted that since the idea is to handle everything via react, that said if a valid usecase for it arises
we can add it in the future.
onChangeonCloseonDayCreateonDestroyonMonthChangeonOpenonReadyonValueUpdate
Styling
Just download any of the already present flatpickr.js themes and add a reference in index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="../assets/css/flatpickr.min.css">
</head>
...Note: Both FlatpickrTypes.Hooks and FlatpickrTypes.Value have a classify function for boxing
and a reduce function for unboxing. This is because both the value and options
prop can be of more than one type:
@react.component
let make = () => {
let (date, setDate) = React.useState(_ => #date(Js.Date.now()));
FlatpickrTypes.(
<Flatpickr
value=date
onChange={
(value, _) => setDate(_ => Value.classify(value))
}
/>
);
};Acknowledgements
Flatpickr: https://github.com/flatpickr/flatpickr
React Flatpickr: https://github.com/haoxins/react-flatpickr
Bs React Flatpickr: https://github.com/cloverinteractive/bs-react-flatpickr