Hi everyone! The html5 spec allows for arbitrary c...

# javascript

[Michael Evans]

Hi everyone!
The html5 spec allows for arbitrary custom tag names like <myPlaceholder/>
Is there a way with the KotlinJS html builder to define arbitrary tag names like this? Having trouble finding an appropriate method. Thanks

[Big Chungus]

Just use standard DOM API - window.createElement()

[Michael Evans]

Ok thanks, wanted to check to make sure I wasn't reinventing the wheel 🙂

[Michael Evans]

hmm, I can add the following and it works great:

open class CUSTOM(tagName: String, initialAttributes : Map<String, String>, override val consumer : TagConsumer<*>)
    : HTMLTag(tagName, consumer, initialAttributes, null, false, false),
    HtmlBlockTag {

}

inline fun RBuilder.custom(tagName: String, classes: String? = null, block: RDOMBuilder<CUSTOM>.() -> Unit) = tag(block) { CUSTOM(tagName, attributesMapOf("class", classes), it) }

But looks like it's sibling types are all defined in kotlin-react-dom-legacy, and the newer kotlin-react-dom goes for generation instead of manual declaration of the builders.

Think it's worth a pull request or are those legacy builders on their way out anyway?

[turansky]

Do you need custom React intrinsic type?

[Michael Evans]

I'm not sure of that terminology, but I'm trying to use react-bootstrap, which has tags like <Row><Col> etc

[Michael Evans]

https://react-bootstrap.github.io/layout/grid/

[Michael Evans]

Actually, I just realized those are even custom html tags, those are react jsx components. So my idea approach won't work anyway

[Michael Evans]

maybe the best approach is to just use vanilla bootstrap-css and declare the class names in my react components

[turansky]

It looks like react components

[turansky]

Like this

[Michael Evans]

Looks siimlar, but that appears to be a wrapper for a different ui framework: https://github.com/JetBrains/kotlin-wrappers/tree/e79251d9f6e86ded5a1f65c0d286b02035f5a7a5/kotlin-ring-ui

[Michael Evans]

also found this wrapper for react-bootstrap, but it's incomplete, still in development: https://bjoernmayer.github.io/kotlin-react-bootstrap/