Welcome to react-modal-global Discussions!

[FrameMuse]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[shuu1992]

how could i rerender in Popup, coz i need to open muiti popup and i just use useState in first Popup and props to second Popup,and i set value in second popup but it didn't work, thx

function firstpopup() {
  const [test, setTest] = React.useState('aa');
  const openPopuptest = useCallback(
    () =>
      Modal.open(secondpopup, {
        test: test,
        setTest: setTest,
        layer: 44,
      }),
    [test]
  );
  return (
    <>
      <h2>{test}</h2>
        <button onClick={openPopuptest}>Popuptest</button>
      </div>
    </>
  );
}
function secondpopup(props) {
  const {test, setTest}= props
  const click = useCallback(
    () =>
      setTest('ee')
    [setTest]
  );
  return (
    <>
      <h2>{test}</h2>.  // after click still "aa". expect "ee"
        <button onClick={click}>Popuptest</button>
      </div>
    </>
  );
}

[FrameMuse]

@wspkiki1992 If you need tightly connected useState between two modals you have to use shared context, here are some of them:

• react context
• react redux
• react recoil

Personally, I advice using recoil since it creates local context only between components it's used.

Currently, there is no way to pass dynamic state to a Modal that is opened using Modal.open.

[shuu1992]

okay, thx for the answer and provide such good module with layer feature which i was searching for , i really appreciate it :).

[shuu1992]

if use lazy load in component Modal.closeByComponent() didn't work
Modal.ts

const PopDialog = new ModalController({
  components: {
    NormalLoginContent: lazy(() => import("views/login/sub/normalLoginContent/NormalLoginContent")),
    ErrorNotice: lazy(() => import("components/popDialog/sub/errorNotice")),
    Store: lazy(() => import("components/header/sub/store")),
  },
  defaultParams: {
    closable: false,
  },
});

NormalLoginContent.tsx

<div className={styles.topBar}>
  {t("Account Login")}
  <Button
    onClick={() => {
      Modal.closeByComponent(NormalLoginContent)
    }}
    className={styles.close}
  >
    <CloseIcon sx={{ fontSize: "3vw" }} />
  </Button>
</div>

[FrameMuse]

I added closeByName in #192.

Usage

Modal.closeByName("NormalLoginContent")

[shuu1992]

u'r a legend, thx:)

[shuu1992]

put const modal = useModalWindow() in login page show error

ModalError: useModalWindow must be used within a modal context.

[FrameMuse]

useModalWindow can only be used inside a modal component.

[shuu1992]

okay, thx :)

[shuu1992]

how to open a new modal when everytime open, coz i need to call api in useEffect everytime when i open, but Data preservation will restore it

[FrameMuse]

If you want to open a modal without preservation, use id property, you can put static value or Date.now() to make sure it's different every time.

[shuu1992]

okay, thx :)

[shuu1992]

TypeError: [...this.windows].at is not a function. (In '[...this.windows].at(-1)', '[...this.windows].at' is undefined)
open — index.ts:10
(this.active=!0,this.events.emit("update"))}open(a,...[b]){var c;let d=new ModalWindow(a,Object.assign(Object.assign({},null===(c=this.config)||void 0===c?void 0:c.defaultParams),b));d.on("close",()=>this.close(d));if(this.active&&(a=[...this.windows].at(-1),(null===a||void 0===a?void 0:a.id)===d.id))return a;0<this.windows.size&&!this.active&&this.windows.clear();this.windows.add(d);this.events.emit("add",d);this.show();return d}openNamed(a,...[b]){a=this.getNamedComponent(a);return this.open(a,

only have error on desktop safari , have try chrome and mobile safari all good

[shuu1992]

i use CRA for the project,and set
.babelrc file
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"@babel/preset-react"
]
}

package.json
"browserslist": {
"production": [">0.2%", "not dead", "not op_mini all"],
"development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
}

desktop safari still err

[FrameMuse]

You need to target at least ES6 or use a polyfill for at

if ([].at == null) {
  Array.prototype.at = function (index: number) {
    return this.slice(index, index + 1)[0]
  }
}

[shuu1992]

i have try use import 'core-js/features/array/at' in entry point still not work :(

[shuu1992]

i try to use a polyfill for at it works ,thx for the answer :)

[shuu1992]

https://stackoverflow.com/questions/73194573/why-does-babel-in-create-react-app-not-polyfill-array-prototype-at-properly
i have find article about CRA

[shuu1992]

https://1cj3vy.csb.app/
use modal.close only hide element and the content inside modal__container still exist. how to completely remove it.
coz my project got ton of logic and data in popup if i close it and update data on the page which will update inside popup too

[shuu1992]

coz i will call api when modal open, and store data in zustand. if i dont remove modal content completely everytime when i trigger data in zustand will trigger to call api again which is inside the modal.

[FrameMuse]

If you use useEffect inside a modal to call API, it will not be triggered when modal is open again.

[shuu1992]

i do use useEffect to call API. i mean if i don't remove modal completely when i already close it and update the data in zustand will trigger to call API in modal coz the zustand data is the dependency.

[FrameMuse]

You can stop triggering API call by checking if your modal is closed

function MyModal() {
  const modal = useModalContext()

  useEffect(() => {
    if (modal.closed) return

    // Your API calls ...
  }, [modal])

  return ...
}

[shuu1992]

okay i will try it first but still hope remove completely can be the feature thx :)