@ahrefs/bs-react-dates

1.3.0 • Public • Published

Reason bindings for react-dates

Reason bindings for react-dates.

Status 🚧 🏗

It is not completed, we are adding bindings as we go. Doesn't follow semver.

Installation, npm

yarn add @ahrefs/bs-react-dates
npm install --save @ahrefs/bs-react-dates

Then add @ahrefs/bs-react-dates to bs-dependencies in your bsconfig.json:

{
  ...
  "bs-dependencies": ["@ahrefs/bs-react-dates"]
}

To include styles

[%bs.raw {|require('react-dates/lib/css/_datepicker.css')|}];

react-dates assumes that box-sizing: border-box is set globally in your page's CSS. At least do this, to make it display properly.

.DateRangePicker *,
.SingleDatePicker *,
.DayPickerRangeController * {
  box-sizing: border-box;
}

Examples

[%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);

  <DateRangePicker
    startDate=?{dates.startDate}
    startDateId="startDateId"
    endDate=?{dates.endDate}
    endDateId="endDateId"
    ?focusedInput
    onDatesChange={v => setDates(_ => v)}
    onFocusChange={v => setFocusedInput(_ => v)}
    isOutsideRange={_day => false}
  />;
};

TODO

Package Sidebar

Install

npm i @ahrefs/bs-react-dates

Weekly Downloads

36

Version

1.3.0

License

MIT

Unpacked Size

15.9 kB

Total Files

14

Last publish

Collaborators

  • feihong
  • jchavarri
  • zindel
  • denstr
  • bryanthomaschen
  • khady
  • rustykey
  • germes