ReasonML Quick Start Guide

Inline styles

In ReasonReact, we can add inline styles via ReactDOMRe.Style.make, which accepts CSS properties as optional labelled arguments. Since they are all optional, passing unit is necessary to call the function:

style={ReactDOMRe.Style.make(~backgroundColor="yellow", ())}

Applying this to our <nav /> element, we can conditionally add a style if we have both a first and last touch in state:

style={  switch (self.state.touches) {  | {first: Some(x), last: Some(x')} =>    ReactDOMRe.Style.make(      ~transform=        "translateX("        ++ string_of_float(x' -. x > 0.0 ? 0.0 : x' -. x)        ++ "0px)",      ~transition="none",      (),    )  | _ => ReactDOMRe.Style.make()  }}

Within the transform property, we concatenate with "0px" instead of just "px" since the float type always ...