react-modal-router v1.0.0

react-modal-router

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { ModalRouter, ModalRoute, usePush } from 'react-modal-router';
import Modal from 'react-modal';

function Page(props) {
  const push = usePush();

  function openModal() {
    push('/foo');
  }

  return (
    <div>
      <p>I am page content</p>
      <button type="button" onClick={openModal}>
        Open foo modal
      </button>
    </div>
  );
}

function App() {
  return (
    <div>
      <ModalRouter>
        <div>
          <Page/>

          <ModalRoute path="/foo" render={({ router }) => {

            return (
              <Modal
                isOpen={true}
                onRequestClose={router.actions.closeModal}
              >
                <p>I am in a modal</p>
              </Modal>
            );
          }}/>
        </div>
      </ModalRouter>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

API

ModalRouter

<ModalRouter>
  {children}
</ModalRouter>

ModalRoute

<ModalRoute
  path={pathString}
  render={(props: { router: Router }) => Element}
/>

usePush

() => (path: string, params?: object) => void

useCloseModal

() => () => void

useParams

() => object | null

useParam

(key: string) => any

useModalRouter

() => Router