How to disable backdrop and close previous open modal in react-modal

Question

Am using react-modal component,

1. I don't need backdrop in certain scenarios, how do I disable the backdrop. Don't see any property in the documentation.
2. How do I close any previous modal's if opened, whenever a new modal is opened.

Answer 1

1) If you don't need backdrop you can always pass the style prop to react-modal:

style={{overlay:{backgroundColor:"rgba(0,0,0,0)"}}}

Taking a look at the code the default style overlay has a backgroundColor rgba(255, 255, 255, 0.75).

2) If you want to close other modals when a new one is opened you can just change the value of the isOpen prop:

isOpen={this.state.showModalOne}

When you open the ModalTwo you will call:

this.setState({showModalOne:false, showModalTwo:true});

If modals are in different components you can work with props. You can even choose to not close the modal but change only its content.