In this project, I was required to select and convert a plugin from this project to React. I opted to recreate a dialog plugin.

• Original Plugin
• New Plugin on npm

This dialog, along with its variants, is built on top of the Radix Dialog and Radix Alert Dialog primitives to ensure accessibility. For styling, I've used Tailwind CSS.

pnpm install @oc-wh/react-dialog

An interruptive modal dialog presenting important content and expecting a user response.

1. Imports

   import {
     AlertDialog,
     AlertDialogAction,
     AlertDialogCancel,
     AlertDialogContent,
     AlertDialogDescription,
     AlertDialogFooter,
     AlertDialogHeader,
     AlertDialogTitle,
     AlertDialogTrigger,
   } from '@oc-wh/react-dialog'

2. Anatomy

   <AlertDialog>
     <AlertDialogTrigger></AlertDialogTrigger>
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle></AlertDialogTitle>
         <AlertDialogDescription></AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
         <AlertDialogCancel></AlertDialogCancel>
         <AlertDialogAction></AlertDialogAction>
       </AlertDialogFooter>
     </AlertDialogContent>
   </AlertDialog>

A window overlaying either the primary window or another dialog window, rendering the underlying content inactive.

1. Imports

   import {
     Dialog,
     DialogContent,
     DialogDescription,
     DialogHeader,
     DialogTitle,
     DialogTrigger,
   } from '@oc-wh/react-dialog'

2. Anatomy

   <Dialog>
     <DialogTrigger></DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogTitle></DialogTitle>
         <DialogDescription></DialogDescription>
       </DialogHeader>
     </DialogContent>
   </Dialog>

An extension of the Dialog component, displaying complementary content to the main content of the screen.

1. Imports

   import {
     Sheet,
     SheetContent,
     SheetDescription,
     SheetHeader,
     SheetTitle,
     SheetTrigger,
   } from '@oc-wh/react-dialog'

2. Anatomy

   <Sheet>
     <SheetTrigger></SheetTrigger>
     <SheetContent>
       <SheetHeader>
         <SheetTitle></SheetTitle>
         <SheetDescription></SheetDescription>
       </SheetHeader>
     </SheetContent>
   </Sheet>

Use the side property on the <SheetContent /> to specify the screen edge where the component will appear. Acceptable values are top, right, bottom, or left.

All components are fully customizable with the className property. When using Tailwind CSS, the plugin employs clsx and Tailwind merge. This allows you to use all the Tailwind CSS classes without bloating your bundle size.

This project is licensed under the MIT License. For more details, see the LICENSE file.