reflex-localize-dom: Helper widgets for reflex-localize

[ frp, gui, html, javascript, library, mit, reactive, reactivity, reflex, user-interface, user-interfaces, web ] [ Propose Tags ]

Library provides helpers for dynamic strings that depends on current selected language.

[Skip to Readme]
Versions [faq]
Change log
Dependencies base (>=4.5 && <4.15), containers, raw-strings-qq, reflex (>=0.4 && <0.9), reflex-dom (>=0.6 && <0.9), reflex-localize (==1.0.*), reflex-localize-dom, text [details]
License MIT
Copyright 2019 ATUM SOLUTIONS AG
Author - Anton Gushcha - Aminion - Vladimir Krutkin - Levon Oganyan
Maintainer - Anton Gushcha <> - Aminion <> - Vladimir Krutkin <> - Levon Oganyan
Category Reflex, FRP, Web, GUI, HTML, Javascript, Reactive, Reactivity, User Interfaces, User-interface
Home page
Bug tracker
Source repo head: git clone
Uploaded by NCrashed at 2020-11-24T22:34:08Z
Distributions NixOS:
Executables reflex-localize-example
Downloads 34 total (2 in the last 30 days)
Rating (no votes yet) [estimated by Bayesian average]
Your Rating
  • λ
  • λ
  • λ
Status Hackage Matrix CI
Docs uploaded by user
Build status unknown [no reports yet]


[Index] [Quick Jump]



Use -f <flag> to enable a flag, or -f -<flag> to disable that flag. More info


Maintainer's Corner

For package maintainers and hackage trustees

Readme for reflex-localize-dom-

[back to package description]


Dom extensions for reflex-localize. Library provides helpers for dynamic strings that depends on current selected language.

How to use

Build example with cabal new-build -f examples.

First, you should define which languages your app supports:

module App.Language(
  , module Reflex.Localize
  ) where

import Reflex.Localize
import Reflex.Localize.Language

data instance Language
  = English
  | Russian

Second, define enumeration for strings ids.

module App.Localization(
    module App.Localization
  , module App.Language
  ) where

import App.Language

data AboutPageStrings =
  | AboutVersion
  | AboutLicence
  | AboutHomepage
  | AboutDevelopers

instance LocalizedPrint AboutPageStrings where
  localizedShow l v = case l of
    English -> case v of
      AboutTitle      -> "About"
      AboutVersion    -> "Version"
      AboutLicence    -> "Licence"
      AboutHomepage   -> "Homepage"
      AboutDevelopers -> "Developers"
    Russian -> case v of
      AboutTitle      -> "О продукте"
      AboutVersion    -> "Версия"
      AboutLicence    -> "Лицензия"
      AboutHomepage   -> "Сайт"
      AboutDevelopers -> "Разработчики"

You can either collect all strings to one data sum or split strings for each widget.

And finally you should implement MonadLocalized type class in you application monad. We suggest using monad transformer LocalizeT via runLocalize function:

runLocalize :: (Reflex t, TriggerEvent t m, MonadIO m) => Language -> LocalizeT t m a -> m a

Finally, you can define widgets with localization like following:

buttonClass :: (DomBuilder t m, PostBuild t m, MonadLocalized t m, LocalizedPrint lbl)
  => Dynamic t Text -> lbl -> m (Event t ())
buttonClass classValD lbl = mkButton "button" [("onclick", "return false;")] classValD . dynText =<< localized lbl

mkButton :: (DomBuilder t m, PostBuild t m) => Text -> Map Text Text -> Dynamic t Text -> m a -> m (Event t a)
mkButton eltp attrs classValD ma = do
  let classesD = do
        classVal <- classValD
        pure $ attrs <> [("class", classVal)]
  (e, a) <- elDynAttr' eltp classesD ma
  return $ a <$ domEvent Click e