{"id":15059644,"url":"https://github.com/fabienhenon/elm-pull-to-refresh","last_synced_at":"2026-02-01T02:03:30.017Z","repository":{"id":57674567,"uuid":"124356555","full_name":"FabienHenon/elm-pull-to-refresh","owner":"FabienHenon","description":"Pull to refresh Elm module","archived":false,"fork":false,"pushed_at":"2018-08-29T14:34:16.000Z","size":31,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-15T04:12:31.920Z","etag":null,"topics":["elm","elm-lang","elm-language","pull-to-refresh","pulltorefresh"],"latest_commit_sha":null,"homepage":"http://package.elm-lang.org/packages/FabienHenon/elm-pull-to-refresh/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":"2018-03-08T07:52:37.000Z","updated_at":"2018-05-28T19:55:30.000Z","dependencies_parsed_at":"2022-09-11T16:31:47.577Z","dependency_job_id":null,"html_url":"https://github.com/FabienHenon/elm-pull-to-refresh","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabienHenon%2Felm-pull-to-refresh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabienHenon%2Felm-pull-to-refresh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabienHenon%2Felm-pull-to-refresh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabienHenon%2Felm-pull-to-refresh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FabienHenon","download_url":"https://codeload.github.com/FabienHenon/elm-pull-to-refresh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243681083,"owners_count":20330155,"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","elm-lang","elm-language","pull-to-refresh","pulltorefresh"],"created_at":"2024-09-24T22:46:14.515Z","updated_at":"2026-02-01T02:03:29.964Z","avatar_url":"https://github.com/FabienHenon.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-pull-to-refresh [![Build Status](https://travis-ci.org/FabienHenon/elm-pull-to-refresh.svg?branch=master)](https://travis-ci.org/FabienHenon/elm-pull-to-refresh)\n\n```\nelm package install FabienHenon/elm-pull-to-refresh\n```\n\nPull to refresh allows you to pull the top of your page to refresh your content.\nThis is working with touches and mouse.\n\n## Getting started\n\n### Types\nFirst you need to add pull to refresh to your messages and your model.\n\n```elm\nimport PullToRefresh\n\ntype Msg\n    = PullToRefreshMsg PullToRefresh.Msg\n\ntype alias Model =\n    { pullToRefresh : PullToRefresh.Model\n    , content : List String\n    }\n```\n\n### Configuration\nSets the configuration of the pull to refresh module\n\n```elm\npullToRefreshConfig : PullToRefresh.Config Msg\npullToRefreshConfig =\n    PullToRefresh.config \"your-content-div-id\"\n        |\u003e PullToRefresh.withRefreshCmd onLoad\n```\n\n### Initialization\nInitializes your model.\n\n```elm\ninit : ( Model, Cmd Msg )\ninit =\n    let\n        ( pullToRefresh, cmd ) =\n            PullToRefresh.init pullToRefreshConfig\n    in\n        ( { pullToRefresh = pullToRefresh, content = initialContent }, Cmd.map PullToRefreshMsg cmd )\n```\n\n### View\nThen, you need to add your pull to refresh component to your `view`.\n\n```elm\nview : Model -\u003e Html Msg\nview model =\n    PullToRefresh.view PullToRefreshMsg\n        pullToRefreshConfig\n        model.pullToRefresh\n        []\n        [ div []\n            (List.map text model.content)\n        ]\n```\n\nThis will create an absolute element using the full space of its parent. Inside it, your content and attributes will be added in another element with touch and scroll handling. If you need to handle scroll manually see `withManualScroll` function.\n\n### Refresh cmd\nYou have to define a function that will be called when we need to refresh page content. This function must return a `Cmd Msg`.\n\nHere is an example with data retrieved from a remote API:\n\n```elm\ntype Msg\n    -- ... add this message\n    | OnDataRetrieved (Result Http.Error String)\n\nonLoad : Cmd Msg\nonLoad =\n    Http.getString \"https://example.com/retrieve-more\"\n        |\u003e Http.send OnDataRetrieved\n```\n\n### Update\nFinally, all we need to do is to implement the update function.\n\n```elm\nupdate : Msg -\u003e Model -\u003e ( Model, Cmd Msg )\nupdate msg model =\n    case msg of\n        PullToRefreshMsg msg_ -\u003e\n            let\n                ( pullToRefresh, cmd ) =\n                    PullToRefresh.update PullToRefreshMsg msg_ pullToRefreshConfig model.pullToRefresh\n            in\n                ( { model | pullToRefresh = pullToRefresh }, cmd )\n\n        OnDataRetrieved (Err _) -\u003e\n            -- Don't forget to handle error\n            ( model, PullToRefresh.stopLoading PullToRefreshMsg )\n\n        OnDataRetrieved (Ok result) -\u003e\n            let\n                content =\n                    addContent result model.content\n            in\n                ( { model | content = content }, PullToRefresh.stopLoading PullToRefreshMsg )\n```\n\nIn the update you have to handle pull to refresh update. It will return an updated model and a command to execute.\n\nYou also have to handle your data refreshing, and **don't forget to call `stopLoading`** so that loading animation finishes and the user is able to pull the view again.\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-pull-to-refresh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabienhenon%2Felm-pull-to-refresh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabienhenon%2Felm-pull-to-refresh/lists"}