-- Hoogle documentation, generated by Haddock -- See Hoogle, http://www.haskell.org/hoogle/ -- | Haskell React bindings -- -- 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
--
@package react-haskell
@version 2.0.1
module React.GHCJS
currentDocument :: IO (Maybe Document)
data Document
data Element
type JSAny = JSRef ()
documentGetElementById :: self -> elementId -> IO (Maybe Element)
data ForeignRetention
NeverRetain :: ForeignRetention
AlwaysRetain :: ForeignRetention
DomRetain :: (forall a. JSRef a) -> ForeignRetention
data JSRef a
JSRef :: JSRef a
type JSFun = JSRef
type JSArray = JSRef
type JSString = JSRef JSString_
class FromJSString a
fromJSString :: FromJSString a => JSString -> a
class ToJSString a
toJSString :: ToJSString a => a -> JSString
class FromJSRef a
fromJSRef :: FromJSRef a => JSRef a -> IO (Maybe a)
class ToJSRef a
toJSRef :: ToJSRef a => a -> IO (JSRef a)
castRef :: JSRef a -> JSRef b
newObj :: IO (JSRef a)
setProp :: ToJSString a => a -> JSRef b -> JSRef c -> IO ()
eqRef :: JSRef a -> JSRef a -> Bool
toArray :: [JSRef a] -> IO (JSArray a)
setProp :: ToJSString a => a -> JSRef b -> JSRef c -> IO ()
syncCallback1 :: ForeignRetention -> Bool -> (JSRef a -> IO b) -> IO (JSFun (JSRef a -> IO b))
syncCallback2 :: ForeignRetention -> Bool -> (JSRef a -> JSRef b -> IO c) -> IO (JSFun (JSRef a -> JSRef b -> IO c))
instance React.GHCJS.FromJSRef Data.Aeson.Types.Internal.Value
instance React.GHCJS.FromJSRef GHC.Types.Int
instance (React.GHCJS.FromJSRef a, React.GHCJS.FromJSRef b) => React.GHCJS.FromJSRef (a, b)
instance React.GHCJS.FromJSRef (React.GHCJS.JSRef ())
instance React.GHCJS.ToJSRef GHC.Types.Int
instance React.GHCJS.ToJSRef Data.Aeson.Types.Internal.Value
instance React.GHCJS.ToJSRef a => React.GHCJS.ToJSRef (GHC.Base.Maybe a)
instance React.GHCJS.ToJSRef (React.GHCJS.JSRef a)
instance React.GHCJS.FromJSString GHC.Base.String
instance React.GHCJS.FromJSString Data.Text.Internal.Text
instance React.GHCJS.FromJSString React.GHCJS.JSString
instance React.GHCJS.ToJSString GHC.Base.String
instance React.GHCJS.ToJSString Data.Text.Internal.Text
instance React.GHCJS.ToJSString React.GHCJS.JSString
instance Data.String.IsString React.GHCJS.JSString
module React.Rebindable
(>>) :: ReactNode sig -> ReactNode sig -> ReactNode sig
return :: ReactNode sig -> ReactNode sig
ifThenElse :: Bool -> t -> t -> t
when :: Bool -> ReactNode sig -> ReactNode sig
unless :: Bool -> ReactNode sig -> ReactNode sig
module React.DOM
-- | Parent nodes always take a list of arguments and children. span_
-- [class_ "example"] $ ... children ...
domParent :: JSString -> [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
domLeaf :: JSString -> [AttrOrHandler sig] -> ReactNode sig
text_ :: Text -> ReactNode sig
textarea_ :: [AttrOrHandler sig] -> Text -> ReactNode sig
a_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
abbr_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
address_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
article_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
aside_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
audio_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
b_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
bdi_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
bdo_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
big_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
blockquote_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
body_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
button_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
canvas_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
caption_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
cite_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
code_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
colgroup_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
data_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
datalist_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
dd_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
del_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
details_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
dfn_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
div_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
dl_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
dt_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
em_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
fieldset_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
figcaption_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
figure_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
footer_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
form_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
h1_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
h2_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
h3_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
h4_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
h5_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
h6_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
head_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
header_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
html_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
i_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
iframe_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
ins_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
kbd_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
label_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
legend_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
li_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
main_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
map_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
mark_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
menu_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
menuitem_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
meter_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
nav_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
noscript_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
object_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
ol_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
optgroup_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
option_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
output_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
p_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
pre_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
progress_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
q_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
rp_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
rt_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
ruby_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
s_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
samp_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
section_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
select_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
small_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
span_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
strong_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
sub_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
summary_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
sup_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
table_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
tbody_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
td_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
tfoot_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
th_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
thead_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
time_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
tr_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
u_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
ul_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
var_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
video_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
area_ :: [AttrOrHandler sig] -> ReactNode sig
base_ :: [AttrOrHandler sig] -> ReactNode sig
br_ :: [AttrOrHandler sig] -> ReactNode sig
col_ :: [AttrOrHandler sig] -> ReactNode sig
embed_ :: [AttrOrHandler sig] -> ReactNode sig
hr_ :: [AttrOrHandler sig] -> ReactNode sig
img_ :: [AttrOrHandler sig] -> ReactNode sig
input_ :: [AttrOrHandler sig] -> ReactNode sig
keygen_ :: [AttrOrHandler sig] -> ReactNode sig
link_ :: [AttrOrHandler sig] -> ReactNode sig
meta_ :: [AttrOrHandler sig] -> ReactNode sig
param_ :: [AttrOrHandler sig] -> ReactNode sig
source_ :: [AttrOrHandler sig] -> ReactNode sig
track_ :: [AttrOrHandler sig] -> ReactNode sig
wbr_ :: [AttrOrHandler sig] -> ReactNode sig
svg_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
defs_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
g_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
linearGradient_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
mask_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
pattern_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
radialGradient_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
stop_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
tspan_ :: [AttrOrHandler sig] -> ReactNode sig -> ReactNode sig
circle_ :: [AttrOrHandler sig] -> ReactNode sig
ellipse_ :: [AttrOrHandler sig] -> ReactNode sig
line_ :: [AttrOrHandler sig] -> ReactNode sig
path_ :: [AttrOrHandler sig] -> ReactNode sig
polygon_ :: [AttrOrHandler sig] -> ReactNode sig
polyline_ :: [AttrOrHandler sig] -> ReactNode sig
rect_ :: [AttrOrHandler sig] -> ReactNode sig
-- | Usage:
--
-- This tutorial assumes only a basic understanding of React, the DOM,
-- and browser events. I recomment at least skimming the official
-- React tutorial.
--
-- Let's start with a basic example:
--
--
-- page_ :: ReactNode Void
-- page_ =
-- let cls = smartClass
-- { 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
--
--
-- In this example we defined a React class with Text state, but
-- taking only () as a prop. It's possible to use anything for
-- props and state -- numbers, JSON, even React classes.
--
-- In the example the input always contains the state from the class, and
-- the state is updated on every input change event -- effectively, every
-- keystroke.
module React
-- | A ReactClass is a standalone component of a user interface
-- which contains the state necessary to render itself. Classes are a
-- tool for scoping.
--
-- Use createClass to construct.
--
-- -- data Transition -- = UserTyping JSString -- | Toggle -- ... -- -- globalPage_ :: [AttrOrHandler Transition] -> ReactNode Transition ---- -- And we want to be able to embed some components that don't care about -- all that. inputBox_ can only output JSString and -- pageHeader_ can't send any signals at all. -- --
-- inputBox_ :: ReactNode JSString -- pageHeader_ :: ReactNode Void ---- -- With locally we can easily embed them in globalPage_: -- --
-- instance GeneralizeSignal JSString Transition where -- generalizeSignal = UserTyping -- -- -- (globalPage_) -- renderFn = props state -> div_ [ class_ "global-page" ] $ do -- locally pageHeader_ -- ... -- locally inputBox_ -- ... --locally :: GeneralizeSignal sigloc siggen => ReactNode sigloc -> ReactNode siggen data AttrOrHandler signal -- | When importing a foreign class you must specify the props it takes. In -- the common case where it takes no props, only handles layout, it's -- convenient to specify the type of props as NoProps. -- -- Example: -- -- pageLayout_ :: ReactNode () -> ReactNode () pageLayout_ = -- importParentClass pageLayout noProps newtype NoProps NoProps :: () -> NoProps -- | Used when importing a foreign class taking no props. See above -- example. noProps :: NoProps mkStaticAttr :: ToJSON a => Text -> a -> AttrOrHandler sig key_ :: Text -> AttrOrHandler sig class_ :: Text -> AttrOrHandler sig href_ :: Text -> AttrOrHandler sig id_ :: Text -> AttrOrHandler sig src_ :: Text -> AttrOrHandler sig value_ :: Text -> AttrOrHandler sig placeholder_ :: Text -> AttrOrHandler sig for_ :: Text -> AttrOrHandler sig type_ :: Text -> AttrOrHandler sig checked_ :: Bool -> AttrOrHandler sig autofocus_ :: Bool -> AttrOrHandler sig width_ :: Double -> AttrOrHandler sig height_ :: Double -> AttrOrHandler sig cx_ :: Double -> AttrOrHandler sig cy_ :: Double -> AttrOrHandler sig d_ :: Double -> AttrOrHandler sig dx_ :: Double -> AttrOrHandler sig dy_ :: Double -> AttrOrHandler sig x_ :: Double -> AttrOrHandler sig y_ :: Double -> AttrOrHandler sig r_ :: Double -> AttrOrHandler sig fill_ :: Text -> AttrOrHandler sig viewBox_ :: Text -> AttrOrHandler sig points_ :: Text -> AttrOrHandler sig transform_ :: Text -> AttrOrHandler sig classParent :: ClassCtx ctx => ClassConfig props state insig exsig ctx -> ReactNode insig -> props -> ReactNode exsig classLeaf :: ClassCtx ctx => ClassConfig props state insig exsig ctx -> props -> ReactNode exsig exportClassLeaf :: ClassCtx ctx => ClassConfig props state insig exsig ctx -> ExportedClass importLeafClass :: ToJSRef props => ImportedClass props sig -> props -> ReactNode sig importParentClass :: ToJSRef props => ImportedClass props sig -> props -> ReactNode sig -> ReactNode sig data ExportedNode sig type ExportedClass = JSRef ExportedClass_ type ImportedClass props sig = JSRef (ImportedClass_ props sig) data PropRequired IsRequired :: PropRequired IsntRequired :: PropRequired -- | The equivalent to React propTypes. data PropType PropBool :: PropRequired -> PropType PropFunc :: PropRequired -> PropType PropNumber :: PropRequired -> PropType PropString :: PropRequired -> PropType PropObject :: PropRequired -> PropType -- | Describe the PropType of a type -- -- Examples: -- --
-- propType (_ :: JSString) = PropString IsRequired -- -- propType (_ :: Bool) = PropBool IsRequired --class PropTypable a