overlay-kit

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**

• 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.
• 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.
• 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

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

License

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