Rescript bindings for the react-flatpickr npm package
>Rescript binding for React Flatpickr.
* Installation
* Usage
* Examples
* Acknowledgements
Run the following in your project:
``console`
npm install rescript-react-flatpicker --save
Then, add rescript-react-flatpickr in bsconfig.json:`diff`
-- "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.
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:
`rescript`
@react.component
let make = () =>
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:
`rescript`
#### options
Js.t({..}) we provide a function that will help you generate these options for you FlatpickrOptions.makeflatpickr.js
all argument are optional and those not set will be set to defaults.
- Flatpickr options: you can pass all Flatpickr parameters here.Flatpickr
- All [hooks][hooks] can be passed within this option too.
_Example_:
`rescript
@react.component
let make = () => {
let today = Js.Date.now();
let daysFromNow = today -> Js.Date.fromFloat
FlatpickrOptions.make(
~dateFormat="l, d/m/Y",
~maxDate=#date(daysFromNow),
(),
)}
value=today
/>;
};
`
#### children
React.element this prop is closely related with the wrap option Flatpickr
from , please refer to the former link for more information.
#### className
string This class will be applied to the inner element.
(Value.t, string) => unit every event handler prop has this type.
- Value.t - first arugment is an array(Js.Date.t) representing selected dates, ifstring
no dates have been selected array will be empty.
- - second argument is a representation of the latest selected date as a stringdateFormat
formatted by the (see options section).
The following props are provided in order to customize the Flatpickr's functions default behaviour.Flatpickr
Please refer to the Events & Hooks section from 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.
- onChangeonClose
- onDayCreate
- onDestroy
- onMonthChange
- onOpen
- onReady
- onValueUpdate
-
Just download any of the already present flatpickr.js themes and add a reference in index.html
`html`
...
Note: Both FlatpickrTypes.Hooks and FlatpickrTypes.Value have a classify function for boxingreduce
and a function for unboxing. This is because both the value and options
prop can be of more than one type:
`rescript``
@react.component
let make = () => {
let (date, setDate) = React.useState(_ => #date(Js.Date.now()));
FlatpickrTypes.(
onChange={
(value, _) => setDate(_ => Value.classify(value))
}
/>
);
};
Flatpickr: https://github.com/flatpickr/flatpickr
React Flatpickr: https://github.com/haoxins/react-flatpickr
Bs React Flatpickr: https://github.com/cloverinteractive/bs-react-flatpickr