VirtualList is an Elm module for efficiently displaying large lists by rendering only the visible items within the viewport, plus a configurable buffer. It dynamically measures the height of displayed elements to ensure smooth scrolling and performance.
- Virtualization: Only renders visible items for improved performance.
- Dynamic Measurement: Adjusts heights dynamically for accurate layout.
- Configurable Buffering: Allows fine-tuning for smooth scrolling.
- Supports Scrolling to Items: Provides methods to navigate programmatically.
In case you know the heights in advance you might get a better performance by using FabienHenon/elm-infinite-list-view
.
In your project directory run:
elm install dominikmayer/elm-virtual-list
Include VirtualList.Model
in your app's model:
import VirtualList
type alias Model =
{ virtualList : VirtualList.Model
-- other fields
}
defaultModel : Model
defaultModel =
{ virtualList = VirtualList.init
-- other fields
}
Include VirtualList.Msg
in your app’s update function:
type Msg
= VirtualListMsg VirtualList.Msg
-- other messages
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
VirtualListMsg virtualListMsg ->
let
( virtualListModel, virtualListCmd ) =
VirtualList.update virtualListMsg model.virtualList
in
( { model | virtualList = virtualListModel }, Cmd.map VirtualListMsg virtualListCmd )
-- other cases
Render the virtual list in your view:
view : Model -> Html Msg
view model =
VirtualList.view (renderRow model) model.virtualList VirtualListMsg
renderRow : Model -> String -> Html Msg
renderRow model id =
div [] [text id]
Check out Obsidian Note ID for an example implementation.