Can I convert existing HTML templates into IDOM components?

[Archmonger]

For example, if I wanted to create a custom IDOM modal component, that originally looked like this:

<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-hidden="true">
    <div id="modal-dialog" class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-header">
            <!-- Stuff in here -->
        </div>
        <div class="modal-body">
            <!-- Stuff in here -->
        </div>
        <div class="modal-footer">
            <!-- Stuff in here -->
        </div>
    </div>
</div>

Would it be possible to create a custom IDOM component (within Python) that could directly replicate this template? Or will I need to create a react component and idom install() it?
(Let's pretend this component doesn't already exist as a part of react-bootstrap)

[rmorshea]

Yup, that should be fine. As a general rule, so long as you don't need direct access to the DOM (i.e. anything you'd need a ref for in React) you should be able to do it with IDOM.

Also, the nice thing about custom components (once the interface is finalized) is that you won't actually need to idom install anything (which requires Node to be installed). Users can just pip install a package that distributes pre-bundled JS without any extra build steps or dependencies.

[rmorshea]

Maybe something like this:

@idom.component
def MyModel(header, body, footer):
    return idom.html.div(
        {"id": "modal-contains", ...},
        idom.html.div(
            {"id": "modal-dialog", ...},
            idom.html.div(
                {"class": "modal-header"},
                header,
            ),
            idom.html.div(
                {"class": "modal-body"},
                body,
            ),
            idom.html.div(
                {"class": "modal-footer"},
                footer,
            )
        )
    )

I'm assuming bootstrap is required for some of this too, so if that's not already on the page where IDOM is being rendered you can just put idom.html.link({"rel": "stylesheet", "href": "..."}) somewhere.