0.4.0 • Published 9 years ago

r-modal v0.4.0

Weekly downloads
4
License
MIT
Repository
github
Last release
9 years ago

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

proptypedescription
openbool.isRequireddisplay the modal and overlay
onRequestClosefunc.isRequiredan escape hatch for the modal to access the outer state. Is called when the overlay is clicked or the ESC key is pressed.
onBeforeOpenfunccalled before the modal opens
onBeforeClosefunccalled before the modal closes
classNamestringclasses to be applied to the modal element
overlayClassNamestringclasses to be applied to the overlay element
styleshape({ overlay, modal })an object with inline styles to be applied to overlay and modal elements
flatNodesboolrenders 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

proptypedescription
lockedbool.isRequiredlocks 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

proptypedescription
componentfuncthe route component to decorate
parentLocation*oneOfType(object, string)the location of the modal's parent that is rendered behind the modal
modalfuncan instance of the stateless Modal component
pagefuncan 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