React Modals

npm i react-modals-jave

Usage

import { createModal, ModalProvider } from 'react-modals-jave';

const MyModal = ({ onClose, children }) => (
  <div onClick={onClose}>
    <div>Modal</div> 
    {children}
  </div>
);

const useModal = createModal(MyModal);

const App = () => {
  return (
    <ModalProvider>
      <Modals /> 
    </ModalProvider>
  )
}

const Header = () => {
  const { close: closeMainModal } = useModal('main');
  
  return <div onClick={closeMainModal}>Header</div>
}

const Modals = () => {
  const { Modal, close, isActive, open } = useModal();
  const mainModalProps = useModal('main');

  return (
    <div>
      <Header />
      {isActive && <Modal onClose={close} />}
      {mainModalProps.isActive && (
        <mainModalProps.Modal>
          <div>Title</div>
        </mainModalProps.Modal>
      )}
    </div>
  )
}

Stack

• SWC
• Rollup^2.66
• Terser
• React Contexts
• React Hook Factories