https://github.com/fabienhenon/elm-pull-to-refresh

Pull to refresh Elm module
https://github.com/fabienhenon/elm-pull-to-refresh

elm elm-lang elm-language pull-to-refresh pulltorefresh

Last synced: about 2 months ago
JSON representation

Pull to refresh Elm module

• Host: GitHub
• URL: https://github.com/fabienhenon/elm-pull-to-refresh
• Owner: FabienHenon
• License: bsd-3-clause
• Created: 2018-03-08T07:52:37.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-29T14:34:16.000Z (over 6 years ago)
• Last Synced: 2024-11-21T00:59:28.476Z (about 2 months ago)
• Topics: elm, elm-lang, elm-language, pull-to-refresh, pulltorefresh
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/FabienHenon/elm-pull-to-refresh/latest
• Size: 30.3 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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)

```

elm package install FabienHenon/elm-pull-to-refresh

```

Pull to refresh allows you to pull the top of your page to refresh your content.

This is working with touches and mouse.

## Getting started

### Types

First you need to add pull to refresh to your messages and your model.

```elm

import PullToRefresh

type Msg

    = PullToRefreshMsg PullToRefresh.Msg

type alias Model =

    { pullToRefresh : PullToRefresh.Model

    , content : List String

    }

```

### Configuration

Sets the configuration of the pull to refresh module

```elm

pullToRefreshConfig : PullToRefresh.Config Msg

pullToRefreshConfig =

    PullToRefresh.config "your-content-div-id"

        |> PullToRefresh.withRefreshCmd onLoad

```

### Initialization

Initializes your model.

```elm

init : ( Model, Cmd Msg )

init =

    let

        ( pullToRefresh, cmd ) =

            PullToRefresh.init pullToRefreshConfig

    in

        ( { pullToRefresh = pullToRefresh, content = initialContent }, Cmd.map PullToRefreshMsg cmd )

```

### View

Then, you need to add your pull to refresh component to your `view`.

```elm

view : Model -> Html Msg

view model =

    PullToRefresh.view PullToRefreshMsg

        pullToRefreshConfig

        model.pullToRefresh

        []

        [ div []

            (List.map text model.content)

        ]

```

This 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.

### Refresh cmd

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

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

```elm

type Msg

    -- ... add this message

    | OnDataRetrieved (Result Http.Error String)

onLoad : Cmd Msg

onLoad =

    Http.getString "https://example.com/retrieve-more"

        |> Http.send OnDataRetrieved

```

### Update

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

```elm

update : Msg -> Model -> ( Model, Cmd Msg )

update msg model =

    case msg of

        PullToRefreshMsg msg_ ->

            let

                ( pullToRefresh, cmd ) =

                    PullToRefresh.update PullToRefreshMsg msg_ pullToRefreshConfig model.pullToRefresh

            in

                ( { model | pullToRefresh = pullToRefresh }, cmd )

        OnDataRetrieved (Err _) ->

            -- Don't forget to handle error

            ( model, PullToRefresh.stopLoading PullToRefreshMsg )

        OnDataRetrieved (Ok result) ->

            let

                content =

                    addContent result model.content

            in

                ( { model | content = content }, PullToRefresh.stopLoading PullToRefreshMsg )

```

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

You 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.

## Examples

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

```

> cd examples/

> elm package install

> elm-reactor

```