elm-infinite-list-view

elm package install FabienHenon/elm-infinite-list-view

Infinite list allows you to display a virtual infinite list of items by only showing visible items on screen. This is very useful for very long list of items.

This way, instead of showing you 100+ items, with this package you will only be shown maybe 20 depending on their height and your configuration.

How it works

A div element is using the full height of your entire list so that the scroll bar shows a long content. Inside 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 is computed using the scrollTop value from the scroll event.

Getting started

Types

First you need to add infinite list to your messages and your model.

import InfiniteList

type Msg
    = InfiniteListMsg InfiniteList.Model

type alias Model =
    { infiniteList : InfiniteList.Model
    , longList : List String
    }

Initialization

Initializes your model.

initModel : Model
initModel =
    { infiniteList = InfiniteList.init
    , longList = initialContent
    }

Config

You will have to create a Config for your infinite list.

Note Your Config should never be held in your model. It should only appear in your view code.

config : InfiniteList.Config String Msg
config =
    InfiniteList.config
        { itemView = itemView
        , itemHeight = InfiniteList.withConstantHeight 20
        , containerHeight = 500
        }
        |> InfiniteList.withOffset 300
        |>