Enable provide own Modal implementation

[sibelius]

We have a custom Modal based on MaterialUI

Would be great to provide own Modal implementations to avoid having to style modal again

[davidmfoley]

I'm open to this. Can you give an example of how you would see this working?

[sibelius]

something like createModalRoute

const createModalRoute = (ModalComponent) => ({ path, parentPath, className, children, component, exact, props, onBackdropClick }: Props) => {
  const getParentPath = (match: Match): string => {
    if (typeof(parentPath) === 'function') {
      return parentPath(match);
    }
    if (parentPath) return parentPath;
    if (match.params[0]) return match.params[0];
    if (match.params[0] === '') return '/';
    return match.url;
  }

  return (
    <Route path={path} exact={exact} render={({match, location, history}) => (
      <ModalComponent
        component={component}
        children={children}
        props={{
          ...props,
          match,
          location,
          history,
          parentPath: getParentPath(match),
          closeModal: () => history.push(getParentPath(match))
        }}
        className={className}
        stackOrder={getStackOrder(match)}
        onBackdropClick={onBackdropClick || (() => history.push(getParentPath(match)))}
      />
    )} />
  );
}

just need to figure it out how to change container and other stuff

[davidmfoley]

If you just want to style the modal, have you already tried setting the various className properties on <ModalContainer />? https://github.com/davidmfoley/react-router-modal#modalcontainer