Gathering detailed insights and metrics for overlay-manager-rc
Gathering detailed insights and metrics for overlay-manager-rc
Installations
npm install overlay-manager-rcDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.17.0
NPM Version
10.8.2
Score
57.6
Supply Chain
92.4
Quality
93.9
Maintenance
100
Vulnerability
100
License
Releases
3
Contributors
2
Unable to fetch Contributors
Languages
6
TypeScript
Vue
JavaScript
CSS
SCSS
HTML
TypeScript (59.1%)
Vue (21.48%)
JavaScript (9.05%)
CSS (8.71%)
SCSS (1.29%)
HTML (0.36%)
Developer
Download Statistics
Total Downloads
1,501
Last Day
3
Last Week
334
Last Month
917
Last Year
1,501
GitHub Statistics
64 Commits
2 Watching
4 Branches
2 Contributors
Maintainers
1
Package Meta Information
Latest Version
0.9.1
Package Id
overlay-manager-rc@0.9.1
Unpacked Size
31.57 kB
Size
6.80 kB
File Count
7
NPM Version
10.8.2
Node Version
20.17.0
Publised On
22 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
1,501
Last day
-94.9%
3
Compared to previous day
Last week
-10%
334
Compared to previous week
Last month
7,541.7%
917
Compared to previous month
Last year
0%
1,501
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Versions
Overlay-manager-rc
English | 한국어
Inspired by angular cdk overlay
React overlay component manager
Feature
- (alert-dialog, dialog, sheet...) open, close state no more management.
- You don't need to worry about declaring overlay component. It's okay to have multiple overlays.
- Delivering data to overlay component props.
- Detect when an overlay component is closed; the resulting data is received on close.
- Prevent closing with beforeClose logic. Asynchronous result handling with await.
- Simplified API with automatic ID management.
- No unnecessary renders when opening or closing overlay components.
- React 19 support
Install
npm
1npm install overlay-manager-rc
yarn
1yarn add overlay-manager-rc
pnpm
1pnpm add overlay-manager-rc
Setting
ex) nextjs(app router) + shadcn-ui(radix-ui)
already install
- alert-dialog
Step1
make file overlay-manager-provider.tsx;
1'use client'; 2 3import type { ReactNode } from 'react'; 4import { OverlayContainer } from "overlay-manager-rc"; 5 6export function OverlayContainerNext({ children }: { children?: ReactNode }) { 7 return <OverlayContainer/>; 8}
Step2
set provider in layout.tsx component
1export default function RootLayout({ children }: { children: ReactNode }) { 2 return ( 3 <html lang="en" suppressHydrationWarning> 4 <body className={cn('min-h-screen font-sans antialiased dark')}> 5 {children} 6 <OverlayContainerNext /> 7 </body> 8 </html> 9 ); 10}
Usage
Create overlay component
1import type {OverlayContentProps} from 'overlay-manager-rc'; 2import {useBeforeClose} from 'overlay-manager-rc'; // Import useBeforeClose 3 4export function TestContent({ 5 open, 6 data, 7 close, 8 id // add id prop 9}: OverlayContentProps<string>) { 10 11 return ( 12 <AlertDialog 13 onOpenChange={(v) => { 14 !v && close(); 15 }} 16 open={open} 17 > 18 <AlertDialogContent> 19 <AlertDialogHeader> 20 <AlertDialogTitle>Alert title</AlertDialogTitle> 21 <AlertDialogDescription>Get Data: {data}</AlertDialogDescription> 22 </AlertDialogHeader> 23 <AlertDialogFooter> 24 <AlertDialogCancel>Cancel</AlertDialogCancel> 25 <AlertDialogAction>Continue</AlertDialogAction> 26 </AlertDialogFooter> 27 </AlertDialogContent> 28 </AlertDialog> 29 ); 30}
Open overlay
1'use client'; 2 3import { useOverlayManager } from 'overlay-manager-rc'; 4 5export function AlertSection() { 6 const { openOverlay } = useOverlayManager(); 7 8 const handleOpenAlert = async () => { 9 const result = await openOverlay({ 10 content: TestContent, 11 data: 'hello!!!!', 12 onClose: (result) => { 13 console.log('Dialog closed with result:', result); 14 }, 15 onOpen: (id) => { 16 console.log('Overlay opened with id:', id); 17 }, 18 }); 19 console.log('Result from openOverlay:', result); // Same value as onClose result 20 }; 21 22 return ( 23 <section className="md:h-screen"> 24 <div className="flex flex-col gap-10"> 25 <Button onClick={handleOpenAlert}> 26 show alert 27 </Button> 28 </div> 29 </section> 30 ); 31}
Manual ID Management
When you specify a manual ID and an overlay with the same ID is already open, the existing overlay will automatically close before opening the new one.
1'use client'; 2 3import { useOverlayManager } from 'overlay-manager-rc'; 4 5export function AlertSection() { 6 const { openOverlay } = useOverlayManager(); 7 8 const handleOpenAlert = async () => { 9 // This will close any existing overlay with ID 'custom-alert' 10 // before opening the new one 11 await openOverlay({ 12 id: 'custom-alert', 13 content: TestContent, 14 data: 'first alert!', 15 }); 16 }; 17 18 const handleOpenAnotherAlert = async () => { 19 // If 'custom-alert' is already open, it will close first 20 await openOverlay({ 21 id: 'custom-alert', 22 content: TestContent, 23 data: 'second alert!', 24 }); 25 }; 26 27 return ( 28 <section className="md:h-screen"> 29 <div className="flex flex-col gap-10"> 30 <Button onClick={handleOpenAlert}>First Alert</Button> 31 <Button onClick={handleOpenAnotherAlert}>Second Alert</Button> 32 </div> 33 </section> 34 ); 35}
API
useOverlayManager
returns
| name | description | parameter |
|---|---|---|
| openOverlay | Opens an overlay component. Returns a Promise. | OverlayOptions |
| closeAllOverlays | Closes all overlay components. | - |
| closeOverlayById | Closes an overlay component by ID. | id: string |
OverlayOptions<TData, TResult>
| Prop | Type | Default | Required |
|---|---|---|---|
| id | string | - | No |
| content | OverlayContent<TData, TResult> | - | Yes |
| data | TData | - | No |
| onClose | (result?: TResult) => void | Promise | - | No |
| onOpen | (id: string) => void | Promise | - | No |
| beforeClose | () => boolean | Promise | - | No |
OverlayContentProps<TData, TResult>
| Prop | Type | Default | Required |
|---|---|---|---|
| data | TData | - | Yes |
| close | (result?: TResult) => void | - | Yes |
| open | boolean | - | Yes |
| id | string | - | Yes |
useBeforeClose
When the manager tries to run an overlay with the same id function that executes before closing the overlay
1import { useBeforeClose } from 'overlay-manager-rc/useBeforeClose'; 2 3// ... inside your overlay component 4useBeforeClose(async () => { 5 // Your logic to determine whether to prevent closing. 6 // For example, check if a form is dirty. 7 const canClose = window.confirm('Are you sure you want to close?'); 8 return canClose; // Return true to allow closing, false to prevent it. 9}, id); // Pass the overlay's ID
No vulnerabilities found.
No security vulnerabilities found.