purescript-react

Low-level React Bindings for PureScript.

For a more high-level set of bindings, you might like to look at purescript-thermite.

• Module Documentation

Building

The library and example can be built with Pulp as follows:

pulp dep update
pulp build
pulp test -r cat > example/index.js
open example/index.html

Example

moduleMainwhereimportPreludeimportControl.Monad.EffimportData.Maybe.Unsafe (fromJust)
importData.Nullable (toMaybe)
importDOM (DOM())
importDOM.HTML (window)
importDOM.HTML.Document (body)
importDOM.HTML.Types (htmlElementToElement)
importDOM.HTML.Window (document)
importDOM.Node.Types (Element())
importReactimport qualified React.DOMasDimport qualified React.DOM.PropsasP
incrementCounter ctx e = do
val <- readState ctx
writeState ctx (val + 1)
counter = createClass $ spec 0 \ctx ->do
val <- readState ctx
return $ D.p [ P.className "Counter"
, P.onClick (incrementCounter ctx)
]
[ D.text (show val)
, D.text " Click me to increment!"
]
main = container >>= render ui
 whereui::ReactElement
ui = D.div [] [ createFactory counter {} ]
container::foralleff. Eff (dom::DOM | eff) Elementcontainer = dowin <- windowdoc <- documentwinelm <- fromJust <$> toMaybe <$> bodydocreturn $ htmlElementToElementelm