https://github.com/toss/overlay-kit

The simplest and most intuitive way to manage overlays in React.
https://github.com/toss/overlay-kit

overlay react

Last synced: about 13 hours ago
JSON representation

The simplest and most intuitive way to manage overlays in React.

• Host: GitHub
• URL: https://github.com/toss/overlay-kit
• Owner: toss
• License: mit
• Created: 2024-05-23T09:53:47.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-12-26T14:03:13.000Z (16 days ago)
• Last Synced: 2025-01-04T01:01:54.578Z (8 days ago)
• Topics: overlay, react
• Language: TypeScript
• Homepage: https://overlay-kit.slash.page
• Size: 4.22 MB
• Stars: 322
• Watchers: 6
• Forks: 33
• Open Issues: 9
• Metadata Files:
  • Readme: README-ko_kr.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

• my-awesome-list - overlay-kit

README

        
![](./docs/public/og.png)

# overlay-kit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/overlay-kit/blob/main/LICENSE) [![codecov](https://codecov.io/gh/toss/overlay-kit/graph/badge.svg?token=JBEAQTL7XK)](https://codecov.io/gh/toss/overlay-kit)

[English](https://github.com/toss/overlay-kit/blob/main/README.md) | 한국어

overlay-kit은 React에서 오버레이를 선언적으로 관리하기 위한 라이브러리예요.

```tsx

import { overlay } from 'overlay-kit';

 {

    overlay.open(({ isOpen, close }) => {

      return ;

    })

  }}

>

  Open

```

overlay-kit은 다음과 같은 기능을 제공해요.

- **간편한 오버레이 관리**: overlay-kit로 오버레이를 간단하게 열고 닫을 수 있어요. `overlay.open(...)` 함수 호출 한 번으로 끝나죠. [코드 비교](https://overlay-kit.slash.page/ko/code-comparison.html) 문서를 참고해보세요.

- **호환성**: overlay-kit로 거의 모든 오버레이를 다룰 수 있어요. Material UI부터 사내 컴포넌트 라이브러리까지, 대부분의 오버레이에 이미 대응되어 있답니다.

- **Promise 통합**: overlay-kit과 Promise를 함께 사용하면 오버레이로부터 결괏값을 쉽게 가져올 수 있어요.

- **견고한 내장 타입**: overlay-kit은 모든 함수에 대해서 견고한 타입을 제공해요. 타입 안정성이 높고, 개발자 경험도 좋죠.

## License

MIT © Viva Republica, Inc. 자세한 내용은 [LICENSE](https://github.com/toss/overlay-kit/blob/main/LICENSE)를 참고하세요.