Closing a modal programatically

[events-jonas-chrisw]

How do you close a modal within a functional component?

[davidmfoley]

If the modal is activated by a <ModalRoute />, it will close when the browser location changes away from the path that matches. If it is rendered as a <Modal /> (i.e. not connected to the router), it is up to you to render (or not render) the <Modal /> content in response to state changes.

[bpb27]

Is there a way to have a backdrop click close a <Modal>?

Edit: Just looked through the source, found my answer - onBackdropClick. Would be great if this was in the docs.

import React, { Fragment } from 'react';
import { Modal } from 'react-router-modal';
import NotificationsModal from '../containers/notifications-modal';

class Navbar extends React.Component {
  state = {
    showNotifications: false
  }

  closeNotifications () {
    this.setState({showNotifications: false});
  }

  toggleNotifications () {
    this.setState({showNotifications: !this.state.showNotifications});
  }

  render () {
    return (
      <Fragment>
        <nav>
          <li onClick={this.toggleNotifications.bind(this)}>Notifications</li>
        </nav>
        <Modal onBackdropClick={this.closeNotifications.bind(this)} component={NotificationsModal} />
      </Fragment>
    )
  }
}

[davidmfoley]

Good catch; I added onBackdropClick to the Modal docs.