### Installing pushmodal with pnpm

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

Installs the pushmodal library using the pnpm package manager. Requires @radix-ui/react-dialog as a peer dependency, which should be installed separately if not already present.

```bash
pnpm add pushmodal
```

--------------------------------

### Initializing pushmodal System with Responsive Modal (TypeScript)

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

This snippet initializes the pushmodal system using createPushModal. It configures the system to include the YourModal component, specifying the Wrapper from the dynamic responsive wrapper. This sets up the modal context and provides functions for managing the modal stack.

```TypeScript
// path: src/modals/index.ts
import * as Dynamic from './dynamic'
import YourModal from './your-modal'
import { createPushModal } from 'pushmodal'

export const {
  pushModal,
  popModal,
  popAllModals,
  replaceWithModal,
  useOnPushModal,
  onPushModal,
  ModalProvider
} = createPushModal({
  modals: {
    YourModal: {
      Wrapper: Dynamic.Wrapper,
      Component: YourModal
    }
  },
})
```

--------------------------------

### Initializing pushmodal and Defining Modals

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

Initializes the pushmodal library by calling createPushModal, providing a map of modal names to their components. This function returns the core API functions (pushModal, popModal, etc.) and the ModalProvider component. It shows how to define modals using shorthand or a longer definition for custom wrappers.

```ts
// file: src/modals/index.tsx (alias '@/modals')
import ModalExample from './modal-example'
import SheetExample from './sheet-example'
import DrawerExample from './drawer-examle'
import { createPushModal } from 'pushmodal'
import { Drawer } from '@/ui/drawer' // shadcn drawer

export const {
  pushModal,
  popModal,
  popAllModals,
  replaceWithModal,
  useOnPushModal,
  onPushModal,
  ModalProvider
} = createPushModal({
  modals: {
    // Short hand
    ModalExample,
    SheetExample,

    // Longer definition where you can choose what wrapper you want
    // Only needed if you don't want `Dialog.Root` from '@radix-ui/react-dialog'
    // shadcn drawer needs a custom Wrapper
    DrawerExample: {
      Wrapper: Drawer,
      Component: DrawerExample
    }
  },
})
```

--------------------------------

### Creating Responsive Modal Wrapper with pushmodal (TSX)

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

This snippet demonstrates how to use createResponsiveWrapper from pushmodal to create a modal component that renders as a Dialog on desktop and a Drawer on mobile based on a specified breakpoint. It imports components from @/ui/dialog and @/ui/drawer.

```TSX
// path: src/modals/dynamic.tsx
import { createResponsiveWrapper } from 'pushmodal'
import { Dialog, DialogContent } from '@/ui/dialog'; // shadcn dialog
import { Drawer, DrawerContent } from '@/ui/drawer'; // shadcn drawer

export default createResponsiveWrapper({
  desktop: {
    Wrapper: Dialog,
    Content: DialogContent,
  },
  mobile: {
    Wrapper: Drawer,
    Content: DrawerContent,
  },
  breakpoint: 640,
});
```

--------------------------------

### Opening Modals with pushModal

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

Demonstrates how to open defined modals, sheets, or drawers using the pushModal function. The function accepts the modal's registered name and an optional props object, whose type is inferred from the modal component definition.

```tsx
import { pushModal } from '@/modals' 

export default function RandomComponent() {
  return (
    <div>
      <button onClick={() =>  pushModal('ModalExample', { foo: 'string' })}>
        Open modal
      </button>
      <button onClick={() => pushModal('SheetExample')}>
        Open Sheet
      </button>
      <button onClick={() => pushModal('DrawerExample')}>
        Open Drawer
      </button>
    </div>
  )
}
```

--------------------------------

### Adding ModalProvider to Root Component

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

Integrates the pushmodal functionality into a React application by adding the ModalProvider component to the root layout or component. The provider manages the modal stack and renders the active modals. It's important not to wrap the children with the provider.

```ts
import { ModalProvider } from '@/modals' 

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <>
    	{/* Notice! You should not wrap your children */}
      <ModalProvider />
      {children}
    </>
  )
}
```

--------------------------------

### Defining Modal Component Using Responsive Wrapper (TSX)

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

This snippet defines a simple React functional component YourModal that utilizes the Content component exported by the dynamic module (which is the responsive wrapper). This allows the modal content to be rendered within either a DialogContent or DrawerContent depending on the screen size.

```TSX
// path: src/modals/your-modal.tsx
import * as Dynamic from './dynamic'

export default function YourModal() {
  return (
    <Dynamic.Content>
      Drawer in mobile and dialog on desktop 🤘
    </Dynamic.Content>
  )
}
```

--------------------------------

### Listening to Modal Events in React Components

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

Shows how to use the useOnPushModal hook within a React component to subscribe to modal open/close events. It allows listening to events for a specific modal by name or for all modals using the '*' wildcard, receiving the open state, props, and name.

```tsx
import { useCallback } from 'react'
import { useOnPushModal } from '@/modals'

// file: a-react-component.tsx
export default function ReactComponent() {
  // listen to any modal open/close
  useOnPushModal('*', 
    useCallback((open, props, name) => {
      console.log('is open?', open);
      console.log('props from component', props);
      console.log('name', name);
    }, [])
  )
  
  // listen to `ModalExample` open/close
  useOnPushModal('ModalExample', 
    useCallback((open, props) => {
      console.log('is `ModalExample` open?', open);
      console.log('props for ModalExample', props);
    }, [])
  )
}
```

--------------------------------

### Listening to Modal Events Globally

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

Illustrates how to use the onPushModal function to subscribe to modal open/close events outside of React components, such as in a global state management store or utility file. It returns an unsubscribe function to clean up the listener.

```ts
import { onPushModal } from '@/modals'

const unsub = onPushModal('*', (open, props, name) => {
  // do stuff
})
```

--------------------------------

### Defining a Modal Component with pushmodal

Source: https://github.com/lindesvard/pushmodal/blob/main/README.md

Defines a React component intended for use as a modal, sheet, or drawer content within the pushmodal system. It wraps the content with the appropriate Radix UI component (e.g., DialogContent) but omits the Root component, as pushmodal handles the root wrapper.

```tsx
// file: src/modals/modal-example.tsx
import { DialogContent } from '@/ui/dialog' // shadcn dialog

// or any of the below
// import { SheetContent } from '@/ui/sheet' // shadcn sheet
// import { DrawerContent } from '@/ui/drawer' // shadcn drawer

export default function ModalExample({ foo }: { foo: string }) {
  return (
    <DialogContent>
      Your modal
    </DialogContent>
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.