react-dropdown-router

usage

import React from 'react';
import ReactDOM from 'react-dom';
import { DropdownRouter, DropdownRoute, useToggleDropdown } from 'react-dropdown-router';
import Modal from 'react-modal';

function Page(props) {
  const toggleFoo = useToggleDropdown('/foo');

  return (
    <div>
      <p>I am page content</p>
      <button type="button" onClick={toggleFoo}>
        Open dropdown
      </button>
      <DropdownRoute>
        <MyDropdownMenu/>
      </DropdownRoute>
    </div>
  );
}

function App() {
  return (
    <div>
      <DropdownRouter>
        <div>
          <Page/>
        </div>
      </DropdownRouter>
    </div>
  );
}

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

API

DropdownRouter

<ModalRouter>
  {children}
</ModalRouter>

DropdownRoute

<ModalRoute path={pathString}>
  {children}
</ModalRoute>

useIsOpen

(path: string) => boolean

useOpenDropdown

(path: string) => () => void

useCloseDropdown

(path: string) => () => void

useToggleDropdown

(path: string) => () => void

useDropdownRouter

() => Router