Dynamic heading element

src/js/bindings/react/react_dom.nim

@@ -7,7 +7,7 @@ from react_globals import React
 when not defined(js):
   {.error: "React.nim is only available for the JS target".}
 
-type NodeOrString = ReactNode or seq[ReactNode] or cstring or string
+type NodeOrString* = ReactNode or seq[ReactNode] or cstring or string
 
 macro idString(x: untyped): auto = newStrLitNode($x)
 

src/js/example/sandbox.nim

@@ -46,11 +46,22 @@ proc toMarkUp(x: OrgInlineBlock): ReactNode =
     of orgLink: a(Attrs{href: x.linkUrl}, x.linkDescription.getOrElse(x.linkUrl))
     else: p(Attrs{}, "Unmatched")
 
+proc intToHeading(x: int, a: Attrs, m1 : NodeOrString): auto =
+  let heading = case x:
+    of 0: "h1"
+    of 1: "h2"
+    of 2: "h3"
+    of 3: "h4"
+    of 4: "h5"
+    of 5: "h6"
+    else: "h1"
+  React.createElement(heading, a, m1)
+
 proc makeItems(x: string): seq[ReactNode] =
   makeOrg(x)
   .fold(
     (err) => @[`div`(Attrs{}, &"Errors: {err}")],
-    (xs: OrgBuilder) => xs.tree.map((x: OrgBlock) => h1(Attrs{}, x.headlineContent.map(x => toMarkUp(x)))),
+    (xs: OrgBuilder) => xs.tree.map((x: OrgBlock) => intToHeading(x.level, Attrs{}, x.headlineContent.map(x => toMarkUp(x)))),
   )
 
 proc makeTopLevel(): ReactNode {.exportc.} =