Template in ModalContainer

[cooligus]

Describe the bug When using template prop it's in ModalContainer modal is always rendered.

I have a layout:

const ModalLayout = (props: any) => {
  return (
    <>
        <div className={classes.background} onClick={() => Modal.closeAll()}></div>,
        <div className={classes.modal}>
          <div>
            <p onClick={() => {Modal.closeAll()}} className={classes.closeModal}>
              <X />
            </p>
          </div>
          <div>
            {props.children}
          </div>
        </div>
    </>
  );
};

And I have a ModalContainer:

<ModalContainer template={ModalLayout}/>

It always renders without triggering any opens.

[FrameMuse]

This is by design. This is for your probable animations and transitions. You need to set display: none when popup is not active. Take a look at the example https://github.com/FrameMuse/react-modal-global/blob/3d1a689dc6d3227cc26c056d29c0add981354e1b/styles/modal.scss#L25

You can find more examples here https://github.com/FrameMuse/react-modal-global#playgrounds

If I didn't quite understand you, tell me more about your case.

[FrameMuse]

@cooligus Could you give more information on it?

[cooligus]

I have realised that CSSModules can have problem handling custom classes.

https://github.com/FrameMuse/react-modal-global/blob/3d1a689dc6d3227cc26c056d29c0add981354e1b/styles/modal.scss#L25 I think it would be very powerful if we could write something like:

<ModalContainer template={ModalLayout} activeClass="activeClass"}>

Nice to have.

[FrameMuse]

This code is in SCSS react-modal-global/styles/modal.scss

You can do the same by typing .modal--active { ... } in plain CSS.