• This library is a modified version of useOverlay from toss/slash, adapted to work seamlessly with Shadcn components.
• Designed for handling overlay components(like Dialog, Drawer) in a declarative way.

Built With

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

   #npm
   npm install @lemoncloud/react-overlay
   
   #yarn
   yarn add @lemoncloud/react-overlay
   
   #pnpm
   pnpm install @lemoncloud/react-overlay

2. Import useOverlay and use it!

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

Usage

• Basic Usage

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

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