React-modal: isOpen flag cause the modal to be destroyed

[thian4]

isOpen is a flag where the DOM got 'appended' and 'destroyed', is there an option where I want to make the modal work as opacity: 0 or 1 instead of display none and false? opacity simply hide and can keep the states in the Modal component.

I can use css to control it but that seems like a hack. A prop as an option will be great.

[diasbruno]

Hi @thian4, you can wrap the modal like:

const MyModal = props => (
  <ReactModal isOpen {...props}>{props.children}</ReactModal>
);

Let me know if you can provide a nice way to accomplish this. I try to keep the API as small as possible to avoid users the need to find the right combination of properties.

[thian4]

isOpen is a flag to decide the children is gone or not from the DOM, your code about will cause the children's state to be gone. This is not a styling question, I think you misunderstood my question. I'm asking is it possible to use opacity under the hood so that children can keep the states although the modal remain hidden.

[diasbruno]

@thian4 Oh, I'm sorry. Totally misunderstood what you are asking. :pray:

That's correct. The state of what is inside the modal will be destroyed.

I'm not sure, but I think that using opacity, the modal will still be responsive to user input (keyboard and mouse).

One option is to persist the state on the parent component and give it to the modal when (re)open.

[m-nathani]

@thian4 Oh, I'm sorry. Totally misunderstood what you are asking.

That's correct. The state of what is inside the modal will be destroyed.

I'm not sure, but I think that using opacity, the modal will still be responsive to user input (keyboard and mouse).

One option is to persist the state on the parent component and give it to the modal when (re)open.

Hey guys, any update on stopping the modal to unmount on isOpen=false and only hide using css property ?