react-haskell alternatives and similar packages
Based on the "Web" category
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of react-haskell or a related project?
Let's put a simple paragraph on the page:
sample :: ReactNode a sample = p_ [ class_ "style" ] $ em_ "Andy Warhol" main :: IO () main = do Just doc <- currentDocument let elemId :: JSString elemId = "inject" Just elem <- documentGetElementById doc elemId render sample elem
That creates a DOM node on the page that looks like:
<p class="style"> <em>Andy Warhol</em> </p>
We can make that a little more complicated with some more child nodes.
sample :: ReactNode a sample = div_ [ class_ "beautify" ] $ do "The Velvet Underground" input_ "Lou Reed"
But of course that input doesn't do anything. Let's change that.
sample :: JSString -> ReactNode JSString sample = div_ $ do "Favorite artist:" input_ [ onChange (Just . value . target) ] text str
The first step is a working GHCJS installation. The easiest way is to download a virtual machine with GHCJS pre-installed. I recommend ghcjs-box.
Now that GHCJS is installed we can use cabal to create a project.
$ mkdir project $ cd project $ cabal init # generate a .cabal file
Now edit the cabal file to include dependencies.
build-depends: base >= 4.8 && < 5, ghcjs-base, ghcjs-dom, react-haskell >= 1.3
Now we can write
sample :: ReactNode a sample = p_ [ class_ "style" ] $ em_ "Andy Warhol" main :: IO () main = do Just elem <- elemById "id" render sample elem
Is it Right for Me?
React-Haskell is a great tool for building web UI from Haskell. However, you may want to consider the alternatives:
- By writing plain React / JSX you can speed development by avoiding the GHCJS compilation step. This also has the advantage of being a bit more universal - more people use React through JSX than React-Haskell.
- ghcjs-react is a very similar project.
- Reflex is an FRP system built with GHCJS in mind.
*Note that all licence references and agreements mentioned in the react-haskell README section above are relevant to that project's source code only.