overlay-kit ·

English | 한국어

overlay-kit is a library for declaratively managing overlays like modals, popups, and dialogs in React.

You can efficiently implement overlays without complex state management or unnecessary event handling.

npm install overlay-kit

Example

Opening Simple Overlays

You can easily open and close overlays using overlay.open.

import { overlay } from 'overlay-kit';

<Button
  onClick={() => {
    overlay.open(({ isOpen, close, unmount }) => (
      <Dialog open={isOpen} onClose={close} onExit={unmount} />
    ))
  }}
>
  Open
</Button>

Opening Asynchronous Overlays

You can handle overlay results as a Promise using overlay.openAsync.

import { overlay } from 'overlay-kit';

<Button
  onClick={async () => {
    const result = await overlay.openAsync<boolean>(({ isOpen, close }) => (
      <Dialog
        open={isOpen}
        onConfirm={() => close(true)}
        onClose={() => close(false)}
        onExit={unmount}
      />
    ))
  }}
>
  Open
</Button>

Why use overlay-kit?

Problems with Traditional Overlay Management**

1. Complexity of State Management
   • Had to manage overlay state directly using useState or global state.
   • Code became complex and less readable as state management mixed with UI logic.
2. Repetitive Event Handling
   • Had to repeatedly write event handling code for opening, closing, and returning results.
   • This led to code duplication and degraded development experience.
3. Lack of Reusability
   • UI and logic were tightly coupled through callback functions to return values from overlays.
   • This made it difficult to reuse components.

Goals of overlay-kit

1. Design Following React Philosophy
   • React favors declarative code.
   • overlay-kit helps manage overlays declaratively.
2. Improve Development Productivity
   • By encapsulating state management and event handling, developers can focus solely on UI and business logic.
3. Enhance Extensibility and Reusability
   • Increased overlay reusability by separating UI and behavior, and returning Promises.

License

MIT © Viva Republica, Inc. See LICENSE for details.