Use Portal Hook

Features

• Type safe
• Small size
• Zero dependencies
• Simple API

Quick Start

Install

npm i use-portal-hook

Add a provider

import { PortalProvider } from "use-portal-hook";
...
root.render(
  <PortalProvider>
    <App />
  </PortalProvider>
)

Create a modal

import { PortalComponent } from "use-portal-hook";

interface DeleteModalProps {
  title: string
}

export const DeleteModal: PortalComponent<DeleteModalProps, boolean> = ({ onClose, props }) => {
  return (
    <div>
      {props.title}
      <button onClick={() => onClose(false)}>Cancel</button>
      <button onClick={() => onClose(true)}>Delete</button>
    </div>
  )
}

Use the modal

import { usePortal } from "use-portal-hook";
import { DeleteModal } from "./delete-modal";


const App = () => {
  const showDeleteModal = usePortal(DeleteModal);

  const handleDelete = async () => {
    const confirmed = await showDeleteModal({ title: 'Delete' })
    console.log('Confirmed: ', confirmed)
  }

  return (
    <button onClick={handleDelete}>Delete Item</button>
  );
}

Examples

• See code
• CodeSandBox TODO

License

MIT