🧩 Plasmo Developers�PD
🧩 Plasmo Developers•2y ago•
10 replies
Kiran

Re-rendering with a custom render function

I'm using a custom render and getRootContainer function in order to mount a custom element directly onto a specific pre-existing div without the use of shadow root (in order to adopt the existing page styles) and to avoid using any typical Plasmo parent elements. However, unlike the default exported component which automatically re-renders when the root is removed and added back in, this custom render does not adopt the functionality. When my custom root container that I've declared is removed from the page and added back in, my custom BetterInput component does not re-render. What is the best way to solve this problem? The following is my code:

export const getRootContainer = () =>
    new Promise((resolve) => {
        const checkInterval = setInterval(() => {
            const rootContainerParent = document.querySelector("._2-F7v")
            if (rootContainerParent) {
                clearInterval(checkInterval)
                resolve(rootContainerParent)
            }
        }, 10)
    });

// Use this to optimize unmount lookups
export const getShadowHostId = () => "better-input";

// Override render to directly place custom component without parent
export const render: PlasmoRender = async ({
                                               // anchor, // the observed anchor, OR document.body.
                                               createRootContainer // This creates the default root container
                                           }) => {
    const rootContainer = await createRootContainer()

    const root = createRoot(rootContainer) // Any root
    root.render(
        <BetterInput/>
    )
}

const BetterInput = () => {
    return (
        <input
            className="better-input"
            placeholder="Type here..."
        >
        </input>
    )
};
Was this page helpful?