Natty Precise Maverick

    @ahrefs/bs-react-dates

    1.1.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

    Install

    npm i @ahrefs/bs-react-dates

    DownloadsWeekly Downloads

    182

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    15.1 kB

    Total Files

    14

    Last publish

    Collaborators

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