solid-transition-group not working inside createRoot

What im trying to do

I want a function that i can call such that i can just inject element where ever i want, this is useful for creating like confirmation. So currently if i want some kind of floating widget that is not always present AKA dynamically show up, im gonna need to create signal and then use that signal to fire <Show />, which is fine for form theyre sometime already huge so adding <Show /> wouldnt be much work. But in the case of simpler things like mere confirmation, i gotta first put that confirmation inside a <Show /> and then create 2 signal one for checking if the element is open and the other for confirmation answer (which is neccessary). and then i gotta make sure that everything is done after that confirmation closed (using effects and such). But now i have made myself a little function to create element outside of the current context so i can just call it where ever.
this is the core function

interface IPopUpProps {
    children: JSXElement
}

export default function popup(_children: () => JSXElement, on_close?: () => void) {
    let close: () => void;

    createRoot((dispose) => {
        let _child: Element | undefined;
        close = () => {
            dispose()
            _child?.remove();
            on_close?.();
        }
        _child = children(_children)() as Element;
        document.body.appendChild(_child);
    })
    return { close };
}

interface IPopUpProps {
    children: JSXElement
}

export default function popup(_children: () => JSXElement, on_close?: () => void) {
    let close: () => void;

    createRoot((dispose) => {
        let _child: Element | undefined;
        close = () => {
            dispose()
            _child?.remove();
            on_close?.();
        }
        _child = children(_children)() as Element;
        document.body.appendChild(_child);
    })
    return { close };
}

SolidJS•2y ago•

6 replies

febri

solid-transition-group not working inside createRoot

What im trying to do

interface IPopUpProps {
    children: JSXElement
}

export default function popup(_children: () => JSXElement, on_close?: () => void) {
    let close: () => void;

    createRoot((dispose) => {
        let _child: Element | undefined;
        close = () => {
            dispose()
            _child?.remove();
            on_close?.();
        }
        _child = children(_children)() as Element;
        document.body.appendChild(_child);
    })
    return { close };
}

interface IPopUpProps {
    children: JSXElement
}

export default function popup(_children: () => JSXElement, on_close?: () => void) {
    let close: () => void;

    createRoot((dispose) => {
        let _child: Element | undefined;
        close = () => {
            dispose()
            _child?.remove();
            on_close?.();
        }
        _child = children(_children)() as Element;
        document.body.appendChild(_child);
    })
    return { close };
}

solid-transition-group not working inside createRoot

What im trying to do

Similar Threads

solid-transition-group not working inside createRoot

What im trying to do

Similar Threads

Similar Threads

Similar Threads