https://github.com/ahrefs/melange-react-dates

ReasonML bindings for react-dates
https://github.com/ahrefs/melange-react-dates

Last synced: about 1 month 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 (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-02-28T11:26:42.000Z (11 months ago)
• Last Synced: 2024-12-16T19:17:41.047Z (about 1 month ago)
• Language: Reason
• Size: 365 KB
• Stars: 8
• Watchers: 3
• 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`?