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

react-modal-global/styles/modal.scss

Line 25 in 3d1a689

&:not(&--active) {

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.

react-modal-global/styles/modal.scss

Line 25 in 3d1a689

&:not(&--active) {

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.

[cooligus]

Problem of this issue is: class .modal--active is in component with template all the time.

[FrameMuse]

So you have .modal--active all the time, no matter what, right?

[FrameMuse]

Could you provide a code example of your implementation on sandbox?

[cooligus]

Sorry you had to wait so long.

Let's say it's our App.tsx:

import { Modal, ModalContainer } from "react-modal-global";
import { ReactNode } from "react";
import { useModalContext } from "react-modal-global";

const Example = () => {
  return <>HELLLO</>;
};

const PopupLayout = (props: { children: ReactNode }) => {
  return (
    <div>
      <div>Example management</div>
      <div>{props.children}</div>
    </div>
  );
};

function App() {
  //Modal.open(Example);
  return (
    <div className="App">
      <ModalContainer template={PopupLayout} />
    </div>
  );
}

export default App;

And this is the result:

Anyway I use 1.2.1 version of the library and react still screams that useModalContext must be used within its context.

[FrameMuse]

In this example, useModalContext is not used anywhere.
To make a modal disappear by default, you should add styles, like this:

import "react-modal-global/styles/modal.scss";

Styles are provided by the library, but you can write your own by the example here:

react-modal-global/styles/modal.scss

Line 25 in 3d1a689

&:not(&--active) {

[FrameMuse]

I created an example using your code
https://codesandbox.io/s/react-modal-global-examples-forked-xsj2kv

[cooligus]

Thanks bro for example!

(Any further reader reading it (add to readme info that dev need to add their own classes))
(useModalExample had nothing to do with this code)