JSX
JSX module
The JSX module provides a set of functions and types to create and render HTML elements in a declarative manner, similar to JSX in JavaScript/React.
let html: string = JSX.render (
<div>
<h1> {JSX.string("Hello, World!")} </h1>
</div>
)
Represents an attribute of an HTML element. It consists of a name and a value which can be of several types.
This is used by the ppx to create the attributes of the HTML element, and rarely used directly.
val render : element -> string
Render a JSX.element to a string.
This function takes a JSX.element and converts it into its corresponding HTML string representation.
let html: string = JSX.render (
<div>
<h1> {JSX.string("Hello, World!")} </h1>
</div>
)
val float : float -> element
Helper to render a float.
This function helps in rendering a float value as a JSX element.
let element : JSX.element = JSX.float 3.14
val int : int -> element
Helper to render an integer.
This function helps in rendering an integer value as a JSX element.
let element : JSX.element = JSX.int 42
Helper to render a list of elements.
This function takes a list of JSX elements and returns a single JSX element that contains all of them. This is useful for rendering dynamic lists of elements.
let element : JSX.element =
JSX.list
[ JSX.string "Item 1"; JSX.string "Item 2"; JSX.string "Item 3" ]
The function to create an HTML DOM Node.
It takes a tag name, a list of attributes, and a list of child elements to create an HTML node.
let link : JSX.element =
JSX.node
( "a",
[ ("href", `String "https://ocaml.org") ],
[ JSX.string "OCaml" ] )
val null : element
Helper to represent nullability in JSX.
This is useful to represent and pattern match against null or empty elements.
let element : JSX.element = JSX.null
val string : string -> element
Helper to represent an element as a string.
This function allows you to directly render a string as a JSX element.
let element : JSX.element = JSX.string "Hello, World!"
val text : string -> element
A deprecated function to render a text string.
This function is deprecated in favor of JSX.string
.
let element : JSX.element = JSX.text "Hello, World!"
val unsafe : string -> element
Helper to bypass HTML encoding and treat output as unsafe. This can lead to HTML escaping problems, XSS injections, and other security concerns. Use with caution.
A common use case for bypassing the HTML encoding is to render a script o style tag.
let content: string = "Raw HTML" in
let script: JSX.element = <script> content </script>
module Debug : sig ... end