{"id":18254736,"url":"https://github.com/fabienhenon/elm-infinite-list-view","last_synced_at":"2025-06-24T13:04:49.693Z","repository":{"id":57674561,"uuid":"94984719","full_name":"FabienHenon/elm-infinite-list-view","owner":"FabienHenon","description":"Displays a virtual infinite list, only showing visible items","archived":false,"fork":false,"pushed_at":"2020-05-12T09:18:56.000Z","size":27,"stargazers_count":33,"open_issues_count":3,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-06-21T17:58:09.350Z","etag":null,"topics":["elm","infinite-lists","virtual-list"],"latest_commit_sha":null,"homepage":"http://package.elm-lang.org/packages/FabienHenon/elm-infinite-list-view/latest","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FabienHenon.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}},"created_at":"2017-06-21T09:03:24.000Z","updated_at":"2024-06-21T17:58:09.351Z","dependencies_parsed_at":"2022-09-11T17:54:10.659Z","dependency_job_id":null,"html_url":"https://github.com/FabienHenon/elm-infinite-list-view","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabienHenon%2Felm-infinite-list-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabienHenon%2Felm-infinite-list-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabienHenon%2Felm-infinite-list-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabienHenon%2Felm-infinite-list-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FabienHenon","download_url":"https://codeload.github.com/FabienHenon/elm-infinite-list-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223150706,"owners_count":17095959,"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":["elm","infinite-lists","virtual-list"],"created_at":"2024-11-05T10:13:24.094Z","updated_at":"2024-11-05T10:13:24.759Z","avatar_url":"https://github.com/FabienHenon.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-infinite-list-view [![Build Status](https://travis-ci.org/FabienHenon/elm-infinite-list-view.svg?branch=master)](https://travis-ci.org/FabienHenon/elm-infinite-list-view)\n\n```\nelm package install FabienHenon/elm-infinite-list-view\n```\n\nInfinite list allows you to display a virtual infinite list of items by only showing visible items on screen. This is very useful for\nvery long list of items.\n\nThis way, instead of showing you 100+ items, with this package you will only be shown maybe 20 depending on their height\nand your configuration.\n\n## How it works\nA div element is using the full height of your entire list so that the scroll bar shows a long content.\nInside this element we show a few items to fill the parent element and we move them so that they are visible. Which items to show\nis computed using the `scrollTop` value from the scroll event.\n\n## Getting started\n\n### Types\nFirst you need to add infinite list to your messages and your model.\n\n```elm\nimport InfiniteList\n\ntype Msg\n    = InfiniteListMsg InfiniteList.Model\n\ntype alias Model =\n    { infiniteList : InfiniteList.Model\n    , longList : List String\n    }\n```\n\n### Initialization\nInitializes your model.\n\n```elm\ninitModel : Model\ninitModel =\n    { infiniteList = InfiniteList.init\n    , longList = initialContent\n    }\n```\n\n### Config\nYou will have to create a `Config` for your infinite list.\n\n**Note** Your `Config` should _never_ be held in your model. It should only appear in your `view` code.\n\n```elm\nconfig : InfiniteList.Config String Msg\nconfig =\n    InfiniteList.config\n        { itemView = itemView\n        , itemHeight = InfiniteList.withConstantHeight 20\n        , containerHeight = 500\n        }\n        |\u003e InfiniteList.withOffset 300\n        |\u003e InfiniteList.withClass \"my-class\"\n\n\nitemView : Int -\u003e Int -\u003e String -\u003e Html Msg\nitemView idx listIdx item =\n    div [] [ text item ]\n\n```\n\nThe `config` function needs a function to render your items, the items' height and the container's height (You don't have to know\nthe exact height. You can specify a greater height or the window's height. The more the height is, the more items will be displayed)\n\n`itemView` is the function responsible of your items rendering. It takes 3 parameters:\n  * index of the element to render\n  * index of the item from your entire list\n  * item to render\n\n### View\nThen, you need to do 2 things in your view:\n  * Add the `onScroll` attribute\n  * Add the list `view`\n\n```elm\nview : Model -\u003e Html Msg\nview model =\n    div\n        [ style\n            [ ( \"width\", \"100%\" )\n            , ( \"height\", \"100%\" )\n            , ( \"overflow-x\", \"hidden\" )\n            , ( \"overflow-y\", \"auto\" )\n            , ( \"-webkit-overflow-scrolling\", \"touch\" )\n            ]\n        , InfiniteList.onScroll InfiniteListMsg\n        ]\n        [ InfiniteList.view config model.infiniteList model.longList ]\n```\n\nYou call `onScroll` on the element that must be scrolled and that contains your list. This function returns an `Attribute`.\n\n**Your element must have a height explicitly set in order to have the scroll event triggered**\n\nAnd then, inside this element, you call the `view` function, passing it the `config`, the `Model` and your long list.\nIt will render a placeholder `div` taking the height your entire list needs, and inside this element, it will render a container\n_(that you can customize with `withCustomContainer`)_ that will contain the currently visible items of your list.\n\n### Update\nFinally, all we need to do is to implement the udpdate function.\n\n```elm\nupdate : Msg -\u003e Model -\u003e ( Model, Cmd Msg )\nupdate msg model =\n    case msg of\n        InfiniteListMsg infiniteList -\u003e\n            ( { model | infiniteList = infiniteList }, Cmd.none )\n```\n\nIn the update you have to handle the infinite list message. This message contains the updated `Model` for the infinite list.\n\n## Examples\n\nTo run the examples go to the `examples` directory, install dependencies and run `elm-reactor`:\n\n```\n\u003e cd examples/\n\u003e elm package install\n\u003e elm-reactor\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabienhenon%2Felm-infinite-list-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabienhenon%2Felm-infinite-list-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabienhenon%2Felm-infinite-list-view/lists"}