Suggestion: reuse the container div if its already avaiable in DOM

[saswat3115]

let container = document.getElementById('custom-modal');
if (!container) {
    container = document.createElement('div');
    container.id = 'custom-modal';
    document.body.appendChild(container);
}

[saswat3115]

Sometimes when we use hot reloding (ex:- create-react-app) that time multiple instance of popup is creating in DOM. To avoid that you can add this peace of code

[e1himself]

Hi @saswat3115!

Thanks for submitting this suggestion.

I've been thinking about the best way to approach this. Just always overwriting the previous div doesn't sound like a great idea to me, as it will probably be very unexpected for most of the users. However, your use-case does make sense as well.

I've come to an idea, where we can pass optional key or id or element property into the reactModal() function to instruct it to reuse the existing div matching the given selector, if any.

What do you think about such solution?

[saswat3115]

let container = document.getElementById('custom-modal');
if (!container) {
    container = document.createElement('div');
    container.id = 'custom-modal';
    document.body.appendChild(container);
}