{"id":18335060,"url":"https://github.com/cmeeren/fable.import.downshift","last_synced_at":"2025-04-09T19:26:29.376Z","repository":{"id":87810584,"uuid":"165436598","full_name":"cmeeren/Fable.Import.Downshift","owner":"cmeeren","description":"Fable bindings for downshift","archived":false,"fork":false,"pushed_at":"2020-01-06T07:09:08.000Z","size":47,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-19T18:18:07.714Z","etag":null,"topics":["fable","fable-bindings"],"latest_commit_sha":null,"homepage":null,"language":"F#","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/cmeeren.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-01-12T21:14:11.000Z","updated_at":"2021-07-13T18:06:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"60e35470-663b-43cd-bb8d-4393e0a5a45a","html_url":"https://github.com/cmeeren/Fable.Import.Downshift","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmeeren%2FFable.Import.Downshift","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmeeren%2FFable.Import.Downshift/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmeeren%2FFable.Import.Downshift/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmeeren%2FFable.Import.Downshift/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cmeeren","download_url":"https://codeload.github.com/cmeeren/Fable.Import.Downshift/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248096970,"owners_count":21047138,"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":["fable","fable-bindings"],"created_at":"2024-11-05T19:53:18.456Z","updated_at":"2025-04-09T19:26:29.347Z","avatar_url":"https://github.com/cmeeren.png","language":"F#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fable.Import.Downshift\n\nThis package provides Fable bindings for [downshift](https://github.com/paypal/downshift).\n\n## Installation\n\n* Install the `downshift` npm package:\n  * using npm: `npm install downshift`\n  * using yarn: `yarn add downshift`\n\n* Install the bindings:\n  * using dotnet: `dotnet add package Fable.Import.Downshift`\n  * using paket: `paket add Fable.Import.Downshift`\n\n## Usage\n\nFamiliarity with [downshift’s native JS API ](https://github.com/paypal/downshift) and how downshift works is assumed. Fable.Import.Downshift simply provide a Fable-React idiomatic API with most props as DU cases.\n\nAs you might expect from downshift’s native API, the `downshift` helper component does not accept a list of children, but a function that receives the downshift state/helpers and returns a React component.\n\nThe downshift prop getters are functions `#seq\u003cIHTMLProp\u003e -\u003e seq\u003cIHTMLProp\u003e` where the input props are passed to the respective prop getter. (The only exception is `getItemProps`, which also takes `'Item` as its first parameter since it’s a required prop.)\n\nBelow is the [downshift readme example](https://github.com/paypal/downshift/blob/39ca5d449e25dfe89b8cbd58b1c6f5a8d3e04329/README.md#usage) converted to F#:\n\n```f#\nopen Fable.Helpers.React\nopen Fable.Helpers.React.Props\nopen Fable.Import\nopen Fable.Import.Downshift\n\ntype Item = { Value: string }\n\nlet items = \n  [ { Value = \"apple\" }\n    { Value = \"pear\" }\n    { Value = \"orange\" }\n    { Value = \"grape\" }\n    { Value = \"banana\" } ]\n\nlet view =\n  downshift [\n    OnChange (fun item _ -\u003e Browser.window.alert(sprintf \"You selected %s\" item.Value))\n    ItemToString (function Some item -\u003e item.Value | None -\u003e \"\")\n  ] (fun ds -\u003e\n    div [] [\n      label (ds.getLabelProps []) [ str \"Enter a fruit\" ]\n      input (ds.getInputProps [])\n      ul (ds.getMenuProps []) [\n        if ds.isOpen then\n          yield\n            items\n            |\u003e List.filter (fun item -\u003e item.Value.Contains ds.inputValue)\n            |\u003e List.mapi (fun index item -\u003e\n                li (ds.getItemProps item [\n                  Key item.Value\n                  Index index\n                  Style [\n                    BackgroundColor \n                      (if ds.highlightedIndex = Some index then \"lightgray\" else \"white\")\n                    FontWeight (if ds.selectedItem = Some item then \"bold\" else \"normal\")\n                  ]\n                ]) [\n                  str item.Value\n                ]\n            )\n            |\u003e ofList\n      ]\n    ]\n  )\n\n```\n\n### Props specific to downshift\n\n* The DU type `DownshiftProps` contains props you can pass to the `downshift` helper.\n* The DU types `GetInputPropsOptions`, `GetItemPropsOptions`, etc. contains props you can pass to the respective prop getters.\n  * Note that `GetItemPropsOptions` does not contain an `Item` case; as mentioned previously, since this is a required prop, it’s passed as the first argument to `getItemProps`.\n* The special `SuppressRefError` prop is available in the DU type `GetPropsCommonOptions`. You pass this as a normal prop alongside others, and the binding internals takes care of passing that prop as a separate object as required by the downshift API.\n\nChangelog\n---------\n\n#### 1.1.1 (2019-07-25)\n\n- Added femto support\n\n#### 1.1.0 (2019-05-02)\n\n* Updated for Fable.Core 3, Fable.React 5 and downshift 3.2\n\n#### 1.0.0 (2019-01-12)\n\n* Initial release\n\n## Deployment checklist\n\n1. Make necessary changes to the code\n2. Update the changelog\n3. Update the version and release notes in the package info\n4. Update the supported npm dependency versions for femto in the fsproj\n5. Commit and tag the commit (this is what triggers deployment from  AppVeyor). For consistency, the tag should ideally be in the format `v1.2.3`.\n6. Push the changes and the tag to the repo. If AppVeyor build succeeds, the package is automatically published to NuGet.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmeeren%2Ffable.import.downshift","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcmeeren%2Ffable.import.downshift","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmeeren%2Ffable.import.downshift/lists"}