ELM : Adding and removing CSS classes conditionally

07 Nov 2017

In the react ecosystem, classnames modules is everyones favorite to conditionally add and remove css classes.

ELM, provide built in support for the same by classList in Html.Attributes

Using classList

classList function will accept a list of Tuples. The type annotation of argument is List (String, Bool). Each tuple should be paired with a css classname and a boolean value. The second value in Tuple can be expression which yeilds a Boolean value.

import Html exposing (..)
import Html.Attributes exposing (classList)

navbar : model -> Html Action
navbar model =
  nav [] [
      a [ classList [
            ("nav-item", True),
            ("active", model.selectedTab == Home)
          ]
        ] [text "Home"],
      a [ classList [
            ("nav-item", True),
            ("active", model.selectedTab == About)
          ]
        ] [text "About"],
      a [ classList [
            ("nav-item", True),
            ("active", model.selectedTab == Talks)
          ]
        ] [text "Talks"],
      a [ classList [
            ("nav-item", True),
            ("active", model.selectedTab == Feed)
          ]
        ] [text "Feed"]
  ]

In the above snippet, the css class nav-item will be always present since it always True but the active class will be added when the associated expression returns true.

Hope that helped. Thanks for reading.

If you find my work helpful, You can buy me a coffee.