{"id":23391441,"url":"https://github.com/ahrefs/melange-react-dates","last_synced_at":"2025-04-08T14:47:49.811Z","repository":{"id":31599457,"uuid":"128378882","full_name":"ahrefs/melange-react-dates","owner":"ahrefs","description":"ReasonML bindings for react-dates","archived":false,"fork":false,"pushed_at":"2024-02-28T11:26:42.000Z","size":374,"stargazers_count":8,"open_issues_count":5,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T00:17:03.723Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Reason","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahrefs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-06T10:06:04.000Z","updated_at":"2024-02-27T11:09:47.000Z","dependencies_parsed_at":"2023-02-16T06:46:12.005Z","dependency_job_id":"ef143815-3921-4e06-8ab3-f4f60e5e61e1","html_url":"https://github.com/ahrefs/melange-react-dates","commit_stats":null,"previous_names":["ahrefs/bs-react-dates"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahrefs%2Fmelange-react-dates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahrefs%2Fmelange-react-dates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahrefs%2Fmelange-react-dates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahrefs%2Fmelange-react-dates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahrefs","download_url":"https://codeload.github.com/ahrefs/melange-react-dates/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247866127,"owners_count":21009238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-22T04:17:28.462Z","updated_at":"2025-04-08T14:47:49.774Z","avatar_url":"https://github.com/ahrefs.png","language":"Reason","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Melange bindings for react-dates\n\n[Melange](https://melange.re/) bindings for [react-dates](https://github.com/airbnb/react-dates).\n\n## Status 🚧 🏗\n\nIt is not completed, we are adding bindings as we go. Doesn't follow semver.\n\n## Installation\n\nInstall [opam](https://opam.ocaml.org/) package manager.\n\nThen:\n\n```sh\nopam install melange-react-dates\n```\n\nThe bindings support the following versions of the `react-dates`\nnpm package, which should be installed separately:\n\n```json\n  \"dependencies\": {\n    \"react-dates\": \"^21.8.0\"\n  }\n```\n\n## Setup\n\nAdd `melange-react-dates` to the `libraries` field in your `dune` file:\n\n```clojure\n; ...\n  (libraries melange-react-dates)\n; ...\n```\n\nTo include styles\n\n```reason\n[%bs.raw {|require('react-dates/lib/css/_datepicker.css')|}];\n```\n\n`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.\n\n```css\n.DateRangePicker *,\n.SingleDatePicker *,\n.DayPickerRangeController * {\n  box-sizing: border-box;\n}\n```\n\n## Examples\n\n```reason\n[%bs.raw {|require('react-dates/lib/css/_datepicker.css')|}];\n\n[@react.component]\nlet make = () =\u003e {\n  let (dates, setDates) = React.useState(_ =\u003e DateRangePicker.Dates.{startDate: None, endDate: None});\n  let (focusedInput, setFocusedInput) = React.useState(_ =\u003e None);\n\n  \u003cDateRangePicker\n    startDate=?{dates.startDate}\n    startDateId=\"startDateId\"\n    endDate=?{dates.endDate}\n    endDateId=\"endDateId\"\n    ?focusedInput\n    onDatesChange={v =\u003e setDates(_ =\u003e v)}\n    onFocusChange={v =\u003e setFocusedInput(_ =\u003e v)}\n    isOutsideRange={_day =\u003e false}\n  /\u003e;\n};\n```\n\n## TODO\n\n* [x] [DateRangePicker](https://github.com/airbnb/react-dates#daterangepicker)\n* [x] [SingleDatePicker](https://github.com/airbnb/react-dates#singledatepicker)\n* [x] [DayPickerRangeController](https://github.com/airbnb/react-dates#daypickerrangecontroller)\n* [ ] can/should I remove dep on `bs-moment`?\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahrefs%2Fmelange-react-dates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahrefs%2Fmelange-react-dates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahrefs%2Fmelange-react-dates/lists"}