Version 2.0 Discussion

[andria-dev]

I am working on a major change for this library, here is the current idea I have.

1. Switching to use @reach/dialog for handling all base modal capabilities while allowing react-spring to work still.
2. Full customization of both overlay and content transitions likely via overlayTransition and contentTransition.
3. Allow any props to be passed down to both DialogOverlay and DialogContent likely via overlayProps and contentProps.
4. Add another library to this repository for framer-motion support (haven't explored how this will work with framer motion's API yet, probably will be easier).
5. Perhaps adding a <ModalTitle> component that handles accessibly labeling the modal with aria-labelledby and a unique id via @reach/auto-id
6. Perhaps adding a <ModalCloseButton> component that would set onClick on it's children to onRequestClose

This is how the API currently looks:

export function MyCustomModalExample({
  isOpen,
  onRequestClose,
  children
}: Pick<IBaseModalProps, 'isOpen' | 'onRequestClose' | 'children'>) {
  return (
    <BaseModal
      isOpen={isOpen}
      onRequestClose={onRequestClose}
      overlayProps={{ className: 'CustomModal__overlay' }}
      // for the most part, you won't need to change `overlayTransition`
      contentProps={{ className: 'CustomModal' }}
      contentTransition={{
        from: { transform: 'translateY(100%)' },
        enter: { transform: 'translateY(0%)' },
        leave: { transform: 'translateY(100%)' }
      }}
    >
      {children}
    </BaseModal>
  );
}

Questions:

• Should we change onRequestClose to onDismiss?

All suggestions are welcome

[sausaw]

@ChrisBrownie55 onDismiss reads better

[sausaw]

@ChrisBrownie55 i believe wicg-inert causes a performance hit on complex apps with too many focusable elements causing jank while transitions are in progress, can we do away with this library?

[andria-dev]

It won't be in the new version. I only needed it to implement an accessibility feature for the modal but @reach/dialog is handling all modal stuff. And it doesn't use wicg-inert.

[andria-dev]

Version 2.0.7 has been released! If anyone has any new ideas, please create an issue.