cekrem/html-helpers/1.1.1

NOTE: the latest version is 2.1.0

HtmlHelpers

Convenient helper functions for working with Html

contentList : List ( Html msg, Bool ) -> List (Html msg)

This function makes it easier to conditionally render Html.nodes. The most obvious usecase is similar to that of Attributes.classList, but for content rather than classes. Each entry in the list will be added and removed depending on the boolean value it is paired with.

For example, maybe we want to render a few animals:

viewAnimals : Animal -> Animal -> Animal -> Html msg
viewAnimals dog cat mouse =
    Html.section [ Attributes.id "animals" ] <|
        contentList
            [ ( Html.text dog.name, dog.visible ) -- dog will be rendered if dog.visible is True
            , ( Html.text cat.name, cat.visible ) -- etc
            , ( Html.text mouse.name, mouse.visible ) -- etc
            ]
lazyContentList : List ( () -> Html msg, Bool ) -> List (Html msg)

A lazy version of contentList. This version takes a list of thunks paired with boolean values. The thunks are only evaluated for items that will be rendered (when their bool is True).

This is useful when the Html nodes are expensive to compute but the conditions are cheap.

For example:

viewAnimals : List Animal -> Html msg
viewAnimals animals =
    Html.section [ Attributes.id "animals" ] <|
        lazyContentList
            [ ( \_ -> expensiveRenderFunction animal1, animal1.visible )
            , ( \_ -> expensiveRenderFunction animal2, animal2.visible )
            , ( \_ -> expensiveRenderFunction animal3, animal3.visible )
            ]
wrapToSingleNode : List (Html msg) -> Html msg

wrapToSingleNode turns a list of Html nodes into a single node, using the following logic:

  • if the list is empty, return nothing
  • if the list contains only one element, simply return that element
  • if the list contains multiple elements, wrap them with a plain div with display: contents

More on display: contents here: https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents

nothing : Html msg

nothing is a convenience function for the most idiomatic and common way to render nothing, namely an empty Html.text.

maybeContentList : List ( a -> Html msg, Maybe a ) -> List (Html msg)

This function works similar to lazyContentList but for Maybe values. It will only render items that have a Just value (of any type) associated with them.

Example usage:

myView =
    maybeContentList
        [ ( \text -> Html.text text, Just "this will render" )
        , ( \text -> Html.text text, Nothing ) -- this will not render
        ]