This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Html.Styled.Keyed

Drop-in replacement for the Html.Keyed module from the elm-lang/html package.

A keyed node helps optimize cases where children are getting added, moved, removed, etc. Common examples include:

  • The user can delete items from a list.
  • The user can create new items in a list.
  • You can sort a list based on name or date or whatever. When you use a keyed node, every child is paired with a string identifier. This makes it possible for the underlying diffing algorithm to reuse nodes more efficiently.

Keyed Nodes

node : String -> List (Attribute msg) -> List ( String, Html msg ) -> Html msg

Works just like Html.node, but you add a unique identifier to each child node. You want this when you have a list of nodes that is changing: adding nodes, removing nodes, etc. In these cases, the unique identifiers help make the DOM modifications more efficient.

Commonly Keyed Nodes

ol : List (Attribute msg) -> List ( String, Html msg ) -> Html msg
ul : List (Attribute msg) -> List ( String, Html msg ) -> Html msg
module Html.Styled.Keyed exposing
    ( node
    , ol, ul
    )

{-| Drop-in replacement for the `Html.Keyed` module from the `elm-lang/html` package.

A keyed node helps optimize cases where children are getting added, moved,
removed, etc. Common examples include:

  - The user can delete items from a list.
  - The user can create new items in a list.
  - You can sort a list based on name or date or whatever.
    When you use a keyed node, every child is paired with a string identifier. This
    makes it possible for the underlying diffing algorithm to reuse nodes more
    efficiently.


# Keyed Nodes

@docs node


# Commonly Keyed Nodes

@docs ol, ul

-}

import Html.Styled exposing (Attribute, Html)
import VirtualDom.Styled


{-| Works just like `Html.node`, but you add a unique identifier to each child
node. You want this when you have a list of nodes that is changing: adding
nodes, removing nodes, etc. In these cases, the unique identifiers help make
the DOM modifications more efficient.
-}
node : String -> List (Attribute msg) -> List ( String, Html msg ) -> Html msg
node =
    VirtualDom.Styled.keyedNode


{-| -}
ol : List (Attribute msg) -> List ( String, Html msg ) -> Html msg
ol =
    node "ol"


{-| -}
ul : List (Attribute msg) -> List ( String, Html msg ) -> Html msg
ul =
    node "ul"