Documentation

Ssetto is an unstyled drawer with a sheet animation on top of it.

The drawer component is provided by Corvu, an unstyled component library

1. Install

   npm install ssetto

2. Usage

   import Drawer from 'ssetto';
   
   function MyComponent() {
     return (
       <Drawer.Root  bgSelector={document.querySelector('#app') as HTMLElement}>
           <Drawer.Trigger class="rounded-lg bg-stone-100 px-4 py-3 text-lg font-medium text-stone-600 transition-all duration-100 hover:bg-stone-200 active:translate-y-0.5">
             Open Drawer
           </Drawer.Trigger>
           <Drawer.Portal>
             <Drawer.Overlay  />
             <Drawer.Content class="max-h-[90vh] -bottom-5  w-full rounded-b-lg bg-stone-50 border-none" >
               <div class="h-1 w-10 self-center rounded-full bg-stone-300" />
               <Drawer.Label class="mt-2 text-center text-xl font-bold">
                 I'm a drawer!
               </Drawer.Label>
               <Drawer.Description class="mt-1 text-center">
                 Drag down to close me.
               </Drawer.Description>
               <p class="absolute inset-x-0 -bottom-5 z-10 text-center bg-inherit">
                 🐸 You found froggy!
               </p>
             </Drawer.Content>
           </Drawer.Portal>
         </Drawer.Root>
     );
   }

3. API Reference

   The Root, Overlay and the Content components are wrappers around Corvu's ones. The rest of components are exported from Corvu's ones Corvu Docs

   bgSelector: HTMLElement = the background element to apply the animation.

   snapPoints: number[] = array of points to where the drawer snaps

   defaultSnapPoint: number[] = snap point where the drawer snaps when opened

   class: string = class to style the element.