r-modal

An unopinionated modal with integrations for react-router and react-redux.

Demos

To run the demos clone the repo and npm i && npm start.

Installation

npm install r-modal --save

Concept

r-modal provides a relatively simple modal component which can be controlled by any of the integrations provided, or with your own state management solution. Conceptually this is similar to how a controlled input works.

There is a secondary stateless component, Page, which is used to lock the scroll position of the page content. In both cases, the components are left unstyled - full control of styling and UI is delegated to the developer.

Components

<Modal>

A stateless unstyled component that renders a modal inside an overlay.

import { Modal } from 'r-modal';
 
<Modal
  open={this.state.open}
  onRequestClose={this.closeModal}>
  Modal contents
  <button onClick={this.closeModal}>Close Modal</button>
</Modal>

API

prop	type	description
open	bool.isRequired	display the modal and overlay
onRequestClose	func.isRequired	an escape hatch for the modal to access the outer state. Is called when the overlay is clicked or the ESC key is pressed.
onBeforeOpen	func	called before the modal opens
onBeforeClose	func	called before the modal closes
className	string	classes to be applied to the modal element
overlayClassName	string	classes to be applied to the overlay element
style	shape({ overlay, modal })	an object with inline styles to be applied to overlay and modal elements
flatNodes	bool	renders modal and overlay nodes as siblings (by default the modal node is nested inside the overlay)

---

<Page>

A stateless unstyled component that locks the scroll position of the underlying page.

import { Page } from 'r-modal';
 
<Page
  locked={true}
  className="my-page">
  {this.prop.children}
</Page>

API

prop	type	description
locked	bool.isRequired	locks the position of the web page, preventing scrolling beneath the modal

---

<WithRoutesInModal>

A react-router integration that renders child routes inside a modal.

import { Page, Modal } from 'r-modal';
import { WithRoutesInModal } from 'r-modal/lib/react-router';
 
const App = props => (
  <div>
    <Page>
      {props.children}
    </Page>
    {props.showModal && (
      <Modal
        open
        onRequestClose={props.onModalClose}>
        {props.modalContents}
      </Modal>
    )}
  </div>
);
 
const AppWithRoutesInModal = props => (
  <WithRoutesInModal
    {...props}
    component={App}
  />
);
 
<Router>
  <Route path="/" component={AppWithRoutesInModal}>
    <IndexRoute component={Index} />
    <Route path="pictures/:id" component={ModalContent} />
  </Route>
</Router>

import { WithRoutesInModal } from 'r-modal/lib/react-router';
 
const BoardWithRoutesInModal = props => (
  <WithRoutesInModal
    {...props}
    component={App}
    backgroundLocation={`/boards/${props.params.id[0]}`}
  />
)
 
<Router>
  <Route path="/boards/:id" component={BoardWithRoutesInModal}>
    <Route path="card/:id" component={Card} />
  </Route>
</Router>

API

prop	type	description
component	func	the route component to decorate
parentLocation*	oneOfType([object, string])	the location of the modal's parent that is rendered behind the modal
modal	func	an instance of the stateless Modal component
page	func	an instance of the stateless Page component

*When provided, child routes are always rendered in a modal. Closing the modal will resolve to this location, therefore the provided location should be the exact route that is rendered beneath the modal. When not provided, routes will only be rendered in a modal if they have router state of { modal: true }.

redux integration

See examples