Either a property or an event handler.

The combination of all properties and event handlers are used to create the javascript object passed as the second argument to React.createElement.

Create a property from anything that can be converted to a JSVal

Some third-party React classes allow passing React elements as properties. This function will first run the given ReactElementM to obtain an element or elements, and then use that element as the value for a property with the given key.

Allows you to create nested object properties. The list of properties passed in will be converted to an object which is then set as the value for a property with the given name. For example,

[ nestedProperty "Hello" [ "a" @= (100 :: Int), "b" $= "World" ]
, "c" $= "!!!"
]

would create a javascript object

{"Hello": {a: 100, b: "World"}, "c": "!!!"}

A class which is used to implement variable argument functions. Any function where each argument implements FromJSVal and the result is either ViewEventHandler or StatefulViewEventHandler is an instance of this class.

Create a callback property. This is primarily intended for foreign React classes which expect callbacks to be passed to them as properties. For events on DOM elements, you should instead use the handlers below.

The function func can be any function, as long as each argument to the function is an instance of FromJSVal and the result of the function is handler. Internally, callback creates a javascript function which accesses the arguments javascript object and then matches entries in arguments to the parameters of func. If func has more parameters than the javascript arguments object, a javascript null is used for the conversion. Since the Maybe instance of FromJSVal converts a null reference to Nothing, you can exploit this to create variable-argument javascript callbacks.

For example, all three of the following functions could be passed as func inside a view.

foo :: Int -> Maybe String -> ViewEventHandler
bar :: Aeson.Value -> ViewEventHandler
baz :: ViewEventHandler

For another example, see the haddock comments in React.Flux.Addons.Bootstrap.

Create a zero-argument callback property. When this callback function is executed, it will render the given view and return the resulting React element. If you need to create a callback which expects arguments, use callbackViewWithProps instead.

A class which is used to implement variable argument functions. These variable argument functions are used to convert from a JavaScript arguments array to a Haskell value of type props.

Any function where each argument implements FromJSVal and the result is ReturnProps is an instance of this class. Entries from the JavaScript arguments array are matched one-by-one to the arguments before ReturnProps value. If the Haskell function has more parameters than the javascript arguments object, a javascript null is used for the conversion. Since the Maybe instance of FromJSVal converts null references to Nothing, you can exploit this to handle arguments not given to the JavaScript function.

A type needed to make GHC happy when solving for instances of ArgumentsToProps.

Create a callback that when called will render a view. This is useful for interacting with third-party React classes that expect a property which is a function which when called returns a React element. The way this works is as follows:

1. You create a Haskell function which translates the javascript arguments of the callback into a Haskell value of type ReturnProps props. This is a variable-argument function using the ArgumentsToProps class. For example,

    data MyProps = MyProps { theInt :: Int, theString :: String }
    myArgsToProps :: Int -> String -> ReturnProps MyProps
    myArgsToProps i s = ReturnProps $ MyProps i s
    

2. You create a view which receives these properties and renders itself. This view will not receive any children.

    myView :: ReactView MyProps
    mYView = defineView "my view" $ \myProps -> ...
    

3. You can then use callbackViewWithProps to create a property which is a JavaScript function. When this JavaScript function is executed, the JavaScript arguments are converted to the props, the view is rendered using the props, and the resulting React element is returned from the JavaScript function.

    someOtherView :: ReactView ()
    someOtherView = defineView "some other view" $ \() ->
        div_ $
           foreignClass_ "theForeginThing"
               [ callbackViewWithProps "the_propname_to_pass_to_theForeignThing" myView myArgsToProps
               , "hello" $= "world"
               ] mempty
   

   theForeignThing React class will receive a property called the_propname_to_pass_to_theForeignThing. The value of this property is a JavaScript function which when executed will convert the arguments to props, render the view, and return the resulting React element.

Create a property from any aeson value (the at sign looks like A for aeson)

Create a text-valued property. This is here to avoid problems when OverloadedStrings extension is enabled

Create a property for anything that can be converted to a javascript value using the ToJSVal class from the ghcjs-base package.. This is just an infix version of property.

Set the className property to consist of all the names which are matched with True, allowing you to easily toggle class names based on a computation.

Every event in React is a synthetic event, a cross-browser wrapper around the native event.

A reference to the object that dispatched the event. https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Access a property in an event target

A version of eventTargetProp which accesses the property of evtTarget in the event. This is useful for example:

div_ $
    input_ [ "type" @= "checked"
           , onChange $ \evt -> let val = target evt "value" in ...
           ]

In this case, val would coorespond to the javascript expression evt.target.value.

Prevent the default browser action from occuring in response to this event.

Stop propagating this event, either down the DOM tree during the capture phase or up the DOM tree during the bubbling phase.

By default, the handlers below are triggered during the bubbling phase. Use this to switch them to trigger during the capture phase.

Use this to create an event handler for an event not covered by the rest of this module. (Events are not covered if they don't have extra arguments that require special handling.) For example, onPlay and onPause are events you could use with on.

The data for the keyboard events

The onChange event is special in React and should be used for all input change events. For details, see https://facebook.github.io/react/docs/forms.html

Initialize touch events is only needed with React 0.13, in version 0.14 it was removed.