Gathering detailed insights and metrics for rescript-react-flatpickr
Gathering detailed insights and metrics for rescript-react-flatpickr
Installations
npm install rescript-react-flatpickrDeveloper Guide
BETA
Typescript
No
Module System
N/A
Node Version
10.15.0
NPM Version
6.4.1
Score
53.5
Supply Chain
85.2
Quality
74.9
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
1,795
Last Day
2
Last Week
9
Last Month
42
Last Year
447
Maintainers
1
Package Meta Information
Latest Version
1.0.4
Package Id
rescript-react-flatpickr@1.0.4
Unpacked Size
12.77 kB
Size
4.47 kB
File Count
8
NPM Version
6.4.1
Node Version
10.15.0
Total Downloads
Cumulative downloads
Total Downloads
1,795
Last Day
0%
2
Compared to previous day
Last Week
80%
9
Compared to previous week
Last Month
61.5%
42
Compared to previous month
Last Year
-11.1%
447
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
3
Dev Dependencies
1
rescript-react-flatpickr
Rescript binding for React Flatpickr.
Table of Contents
Installation
Run the following in your project:
1npm install rescript-react-flatpicker --save
Then, add rescript-react-flatpickr in bsconfig.json:
1-- "bs-dependencies": [], 2++ "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:
1@react.component 2let make = () => 3 <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:
1<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:
1@react.component 2let make = () => { 3 let today = Js.Date.now(); 4 let daysFromNow = today -> Js.Date.fromFloat 5 6 <Flatpickr 7 options={ 8 FlatpickrOptions.make( 9 ~dateFormat="l, d/m/Y", 10 ~maxDate=#date(daysFromNow), 11 (), 12 )} 13 value=today 14 />; 15};
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
1<!doctype html> 2<html lang="en"> 3<head> 4 <link rel="stylesheet" href="../assets/css/flatpickr.min.css"> 5</head> 6...
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:
1@react.component 2let make = () => { 3 let (date, setDate) = React.useState(_ => #date(Js.Date.now())); 4 FlatpickrTypes.( 5 <Flatpickr 6 value=date 7 onChange={ 8 (value, _) => setDate(_ => Value.classify(value)) 9 } 10 /> 11 ); 12};
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
No vulnerabilities found.
No security vulnerabilities found.