https://github.com/ahrefs/melange-react-dates
ReasonML bindings for react-dates
https://github.com/ahrefs/melange-react-dates
Last synced: over 1 year ago
JSON representation
ReasonML bindings for react-dates
- Host: GitHub
- URL: https://github.com/ahrefs/melange-react-dates
- Owner: ahrefs
- License: mit
- Created: 2018-04-06T10:06:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-28T11:26:42.000Z (over 2 years ago)
- Last Synced: 2025-04-03T00:17:03.723Z (over 1 year ago)
- Language: Reason
- Size: 365 KB
- Stars: 8
- Watchers: 2
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
# Melange bindings for react-dates
[Melange](https://melange.re/) bindings for [react-dates](https://github.com/airbnb/react-dates).
## Status 🚧 🏗
It is not completed, we are adding bindings as we go. Doesn't follow semver.
## Installation
Install [opam](https://opam.ocaml.org/) package manager.
Then:
```sh
opam install melange-react-dates
```
The bindings support the following versions of the `react-dates`
npm package, which should be installed separately:
```json
"dependencies": {
"react-dates": "^21.8.0"
}
```
## Setup
Add `melange-react-dates` to the `libraries` field in your `dune` file:
```clojure
; ...
(libraries melange-react-dates)
; ...
```
To include styles
```reason
[%bs.raw {|require('react-dates/lib/css/_datepicker.css')|}];
```
`react-dates` [assumes](https://github.com/airbnb/react-dates/issues/798) that `box-sizing: border-box` is set globally in your page's CSS. At least do this, to make it display properly.
```css
.DateRangePicker *,
.SingleDatePicker *,
.DayPickerRangeController * {
box-sizing: border-box;
}
```
## Examples
```reason
[%bs.raw {|require('react-dates/lib/css/_datepicker.css')|}];
[@react.component]
let make = () => {
let (dates, setDates) = React.useState(_ => DateRangePicker.Dates.{startDate: None, endDate: None});
let (focusedInput, setFocusedInput) = React.useState(_ => None);
setDates(_ => v)}
onFocusChange={v => setFocusedInput(_ => v)}
isOutsideRange={_day => false}
/>;
};
```
## TODO
* [x] [DateRangePicker](https://github.com/airbnb/react-dates#daterangepicker)
* [x] [SingleDatePicker](https://github.com/airbnb/react-dates#singledatepicker)
* [x] [DayPickerRangeController](https://github.com/airbnb/react-dates#daypickerrangecontroller)
* [ ] can/should I remove dep on `bs-moment`?