This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 3.0.2
Committed At 2018-10-16 11:54:06 UTC

Modules

    README

    elm-infinite-scroll Build Status

    elm install FabienHenon/elm-infinite-scroll
    

    Infinite scroll allows you to load more content on demand for the user while scrolling.

    The infinite scroll must be bound to an Html element and will execute your own Cmd when the user scrolled to the bottom (or top) of the element.

    The Cmd can be anything you want from local data fetching or complex requests on remote APIs. All it has to do is to return a Cmd msg and call stopLoading once fetching is finished so that the infinite scroll can continue asking for more content.

    Getting started

    Types

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

    import InfiniteScroll
    
    type Msg
        = InfiniteScrollMsg InfiniteScroll.Msg
    
    type alias Model =
        { infiniteScroll : InfiniteScroll.Model Msg
        , content : List String
        }
    

    Initialization

    Initializes your model.

    initModel : Model
    initModel =
        { infiniteScroll = InfiniteScroll.init loadMore
        , content = initialContent
        }
    

    loadMore is the command that will be called when new content is required (more on see later). initialContent is your own function that initializes your content with a few data (more data will be added as the user scrolls the element)

    View

    Then, you need to bind infinite scroll to your view, in the element that will contain you long content.

    view : Model -> Html Msg
    view model =
        div
            [ style [ ( "height", "300px" ) ]
            , InfiniteScroll.infiniteScroll InfiniteScrollMsg
            ]
            (List.map viewContentItem model.content)
    

    viewContentItem is your own function responsible for your content rendering.

    You call infiniteScroll on the element that must be scrolled. This function returns an Attribute.

    Your element must have a height explicitly set in order to have the scroll event triggered

    Load more

    You have to define a function that will be called when we need more content. This function must return a Cmd Msg.

    Here is an example with data retrieved from a remote API:

    type Msg
        -- ... add this message
        | OnDataRetrieved (Result Http.Error String)
    
    loadMore : InfiniteScroll.Direction -> Cmd Msg
    loadMore dir =
        Http.getString "https://example.com/retrieve-more"
            |> Http.send OnDataRetrieved
    

    Update

    Finally, all we need to do is to implement the update function.

    update : Msg -> Model -> ( Model, Cmd Msg )
    update msg model =
        case msg of
            InfiniteScrollMsg msg_ ->
                let
                    ( infiniteScroll, cmd ) =
                        InfiniteScroll.update InfiniteScrollMsg msg_ model.infiniteScroll
                in
                    ( { model | infiniteScroll = infiniteScroll }, cmd )
    
            OnDataRetrieved (Err _) ->
                let
                    -- Don't forget to handle error
                    infiniteScroll =
                        InfiniteScroll.stopLoading model.infiniteScroll
                in
                    ( { model | infiniteScroll = infiniteScroll }, Cmd.none )
    
            OnDataRetrieved (Ok result) ->
                let
                    content =
                        addContent result model.content
    
                    infiniteScroll =
                        InfiniteScroll.stopLoading model.infiniteScroll
                in
                    ( { model | content = content, infiniteScroll = infiniteScroll }, Cmd.none )
    

    In the update you have to handle infinite scroll update. It will return an updated model and a command to execute.

    You also have to handle your data fetching, and don't forget to call stopLoading so that you won't have to wait for timeout before being able to load event more data.

    Examples

    To run the examples go to the examples directory, install dependencies and run elm-reactor:

    > cd examples/
    > elm package install
    > elm-reactor