lindesvard / pushmodal Goto Github PK

Handle shadcn dialog, sheet and drawer with ease

License: MIT License

JavaScript 24.33% TypeScript 71.13% CSS 4.54%

pushmodal's Introduction

Installation

pnpm add pushmodal

We take for granted that you already have @radix-ui/react-dialog installed. If not ➡️ pnpm add @radix-ui/react-dialog

Usage

1. Create a modal

When creating a dialog/sheet/drawer you need to wrap your component with the <(Dialog|Sheet|Drawer)Content> component. But skip the Root since we do that for you.

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

2. Initialize your modals

// 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
    }
  },
})

How we usually structure things

src
├── ...
├── modals
│   ├── modal-example.tsx
│   ├── sheet-example.tsx
│   ├── drawer-examle.tsx
│   ├── ... more modals here ...
│   └── index.tsx
├── ...
└── ...

3. Add the `<ModalProvider />` to your root file.

import { ModalProvider } from '@/modals' 

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

4. Use `pushModal`

pushModal can have 1-2 arguments

name - name of your modal
props (might be optional) - props for your modal, types are infered from your component!

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>
  )
}

4. Closing modals

You can close a modal in three different ways:

popModal() - will pop the last added modal
popModal('Modal1') - will pop the last added modal with name Modal1
popAllModals() - will close all your modals

5. Replacing current modal

Replace the last pushed modal. Same interface as pushModal.

replaceWithModal('SheetExample', { /* Props if any */ })

6. Using events

You can listen to events with useOnPushModal (inside react component) or onPushModal (or globally).

The event receive the state of the modal (open/closed), the modals name and props. You can listen to all modal changes with * or provide a name of the modal you want to listen on.

Inside a component

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);
    }, [])
  )
}

Globally

import { onPushModal } from '@/modals'

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

Responsive rendering (mobile/desktop)

In some cases you want to show a drawer on mobile and a dialog on desktop. This is possible and we have created a helper function to get you going faster. createResponsiveWrapper 💪

// 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,
});

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

// 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
    }
  },
})

Issues / Limitations

Issues or limitations will be listed here.

Contributors

pushmodal's People

Contributors

Stargazers

Forkers

nicholascostadev tigawanna nectum owuzan mz0in iswilljr lleifermann bjcgg ringge

pushmodal's Issues

Prevent dialog from closing

Hi, thanks for this amazing library! I was trying to convert my app to using this library for handling the modal state but inevitable I have hit a barrier.

I was trying to stack a dialog with an alert dialog from radix ui. I wanted to prevent closing the dialog when trying to close it with a dirty form inside it and show the alert dialog instead. But I can't do that since there's no access to the controlled state of the modal (specifically the onOpenChange of the Root)

If someone can find a way to implement this kind of flow without modifications to the library I would love to know. The only thing that comes to my mind would be to manage the "closable" state in the StateItem like it's being done with the closedAt property. And than pass a "setClosable" it in the Component so it can be changed within the modal.

State hook

It would be nice to be able to subscribe to the state of a modal by key. My use-case is to reset a state whenever a modal is opened. I see you're using state: 'open' | 'close' but it would probably best to reuse open: boolean Radix's API. Something like:

// no key for any opened modal, or could export another hook useAllModalsState
// useModalState or useModalOpenState or useModalOpen
const useModalState = (key?: T) => {
  // return the open state of the modal with that key
  return open
}

That may require the provider to have children, which would be a more intuitive API since most providers are designed like that. You can prevent the re-rendering by nesting the ModalProvider content one level down so only that child will be re-rendered on modal state change:

const ModalContext = React.createContext(...)

const Modal = () => {} // previous ModalProvider implementation

const ModalProvider = () => {  
  return (
    <ModalContext.Provider>
      <Modal />
      {children}
    </ModalContext.Provider>
  )
}

Wrapper options

Great work! I'm considering adopting it in my app.

Firstly, I believe that shadcn components should not be included in the package, as they are intended to be owned by the consumer.

I could use my own components using the Wrapper option, but it seems there is no way to pass other options to them. For instance, I need to pass onOpenChange.

https://github.com/lindesvard/pushmodal/blob/main/src/lib/factory.tsx#L123

popModal doesn't animate dialog & drawer (with my setup)

Hi,

I implemented pushmodal in the following way.

Responsive modal

export function ModalResponsive({
  trigger,
  title,
  description,
  children = "Modal content",
  open: openDefault = false,
  onClose,
}) {
  const [open, setOpen] = React.useState(openDefault);
  const isDesktop = useIsDesktop();

  React.useEffect(() => {
    if (!open) {
      onClose && onClose();
    }
  }, [open]);
  return isDesktop ? (
    <Dialog open={open} onOpenChange={setOpen}>
      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
      <DialogContent>
        <DialogHeader className={css({ mb: "3" })}>
          <DialogTitle className={css({ textAlign: "left" })}>
            {title}
          </DialogTitle>
          <DialogDescription className={css({ textAlign: "left" })}>
            {description}
          </DialogDescription>
        </DialogHeader>
        {children}
      </DialogContent>
    </Dialog>
  ) : (
    <Drawer open={open} onOpenChange={setOpen}>
      {trigger && <DrawerTrigger asChild>{trigger}</DrawerTrigger>}
      <DrawerContent
        className={css({
          px: "4",
        })}>
        <DrawerHeader className={css({ textAlign: "left" })}>
          <DrawerTitle>{title}</DrawerTitle>
          <DrawerDescription>{description}</DrawerDescription>
        </DrawerHeader>
        {children}
        <DrawerFooter className={css({ pt: "2" })}>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

Modal

export default function ModalExample({
  title,
  text,
  customButton,
  onConfirm,
  onCancel,
}) {
  return (
    <>
      <ModalResponsive
        open
        title={title}>
        {text && <div>{text}</div>}
        <div>
          <Button
            variant="outline"
            onClick={() => {
              popModal("Modal");
              onCancel();
            }}>
            Cancel
          </Button>
          {customButton}
          <Button
            variant="destructive"
            onClick={() => {
              popModal("Modal");
              onConfirm();
            }}>
            Yes
          </Button>
        </div>
      </ModalResponsive>
    </>
  );
}

The problem I have is that I declare the buttons in the ModalExample that control the open/close state of the modal.
When I first pushmodal to show the ModalExample, it correctly animates. But when I click on the Cancel button and popModal("Modal") triggers, it closes the modal without the nice effect (both with dialog and drawer).
If in ModalResponsive I add the DrawerClose and click on it, it animates correctly:

<DrawerClose asChild>
    <Button variant="default">Cancel</Button>
</DrawerClose>

Do you know what could I change so that it animates correctly? I could pass the buttons to the ModalResponsive and wrap them with DrawerClose/DialogClose instead of Button but, in that case I would not leverage popModal at all to close my modals (which defeats the purpose of using pushmodal in the first place).

Turbopack error - "It might have been deleted in an HMR update"

Hello,

Your lib is awesome and I've found myself unable to work without it!
I found an issue using pushmodal with nextjs and turbopack.

Minimal reproduction link:
https://github.com/louisthomaspro/pushmodal-turbopack-error

pnpm i
pnpm dev --turbo
When navigating to http://localhost:3000/, you will see the below error:

Error: Module [project]/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/image.js [app-client] (ecmascript) was instantiated because it was required from module [project]/app/page.tsx [app-client] (ecmascript), but the module factory is not available. It might have been deleted in an HMR update.

I have no issue using webpack instead of turbopack. But turbopack is so much faster and nearly stable!
Anyone has this issue ?

lindesvard / pushmodal Goto Github PK

pushmodal's Introduction

Installation

Usage

1. Create a modal

2. Initialize your modals

3. Add the <ModalProvider /> to your root file.

4. Use pushModal

4. Closing modals

5. Replacing current modal

6. Using events

Responsive rendering (mobile/desktop)

Issues / Limitations

Contributors

pushmodal's People

Contributors

Stargazers

Forkers

pushmodal's Issues

Recommend Projects

Recommend Topics

Recommend Org

3. Add the `<ModalProvider />` to your root file.

4. Use `pushModal`