open-index/open-npm huggingface dataset:
npm package: @lemoncloud/react-overlay
Description: <div align="center">     <h1>@lemoncloud/react-overlay</h1> </div>
Latest version: 0.0.3

<div align="center">
    <h1>@lemoncloud/react-overlay</h1>
</div>

- This library is a modified version of [useOverlay](https://github.com/toss/overlay-kit/blob/main/README-ko_kr.md) from `toss/slash`, adapted to work seamlessly with Shadcn components.
- Designed for handling overlay components(like `Dialog`, `Drawer`) in a declarative way.

## Built With

![Badge](https://img.shields.io/badge/React-61DAFB.svg?&logo=React&logoColor=fff)

## Getting Started

### Prerequisites

This library is using react context for overlay controller.

- react : ^18.0.0
- react-dom : ^18.0.0

### Installation

1. Install with your package manager

    ```bash
    #npm
    npm install @lemoncloud/react-overlay

    #yarn
    yarn add @lemoncloud/react-overlay

    #pnpm
    pnpm install @lemoncloud/react-overlay
    ```

2. Import `useOverlay` and use it!

    ```ts
    import { useOverlay } from '@lemoncloud/react-overlay';
    ```

## Usage

- Basic Usage

```tsx
// SampleButton.tsx
import { useOverlay } from '@lemoncloud/react-overlay';
import { SampleDialog } from '@components';

const overlay = useOverlay();

const SampleButton = () => {
    return <button onClick=(() => overlay.open(overlayProps => <SampleDialog {...overlayProps} />))></button>
}

// SampleDialog.tsx
import type { OverlayProps } from '@lemoncloud/react-overlay';
import { Dialog, DialogContent } from '@shadcn/components/ui/dialog';

const SampleDialog = ({ open, onOpenChange, close }: OverlayProps) => {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent>Sample Dialog</DialogContent>
        </Dialog>
    );
};
```

- Conditional Open

```tsx
import { useOverlay } from '@lemoncloud/react-overlay';
import { SampleDialog } from '@components';

const overlay = useOverlay();

<button
    onClick={() =>
        overlay
            .validate(() => condition(paramteter))
            ?.validate(false)
            ?.open(overlayProps => <SampleDialog {...overlayProps} />)
    }
>
    Open Dialog
</button>;
```