The react-haskell package

[Tags:library, mit]

This package provides high level bindings to Facebook's React library, meant for use with GHCJS.

React is a JavaScript library for building user interfaces. React (and React-Haskell) is focused on just UI - it's not a framework.

Currently React-Haskell can render simple stateful components, but not what React calls classes. Put another way, React-Haskell doesn't support lifecycle methods yet.

Here's a simple example which demonstrates basic elements, attributes, state, and handling events.

 page_ :: ReactNode Void
 page_ =
     let cls = smartClass
             -- this is a record and these should really be curly braces,
             -- but haddock breaks on them.
             [ name = "page"

             -- initially the input is empty
             , initialState = ""

             -- always transition to the input's new value
             , transition = \(_, value) -> (value, Nothing)

             , renderFn = \_ str -> div_ [ class_ "container" ] $ do
                 input_ [ value_ str, onChange (Just . value . target) ]
     in classLeaf cls ()

 main :: IO ()
 main = do
     Just doc <- currentDocument
     Just elem <- documentGetElementById doc ("elem" :: JSString)
     render page_ elem


Versions,,, 2.0.0, 2.0.1
Dependencies aeson, base (>=4.5 && <5), deepseq, ghcjs-base (>=0.1), ghcjs-dom (>=0.1), ghcjs-prim (>=, lens-family, monads-tf, text, transformers, unordered-containers, void (==0.7) [details]
License MIT
Author Joel Burget
Category Web
Home page
Bug tracker
Source repository head: git clone
Uploaded Fri Jul 31 09:40:32 UTC 2015 by joelb
Distributions NixOS:2.0.1
Downloads 756 total (11 in the last 30 days)
0 []
Status Docs uploaded by user
Build status unknown [no reports yet]
Hackage Matrix CI




ghcjstell cabal we're using ghcjsEnabledAutomatic

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