davidmfoley / react-router-modal Goto Github PK

Improve accessibility of the modal as per https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
or, allow us to define custom markup which should help with things like adding aria-modal="true" to the container

Is there a way for the parent path to have a param in it like the example below?

path="/image/:id/comments" parentPath="/image/:id"

Doing this does not work, hence I believe that the parent path logic isn't the same as the one used in react router as when you click the backdrop, it will redirect to /image/:id without the actual ID.

<ModalLink tabIndex={2} />

Doesn't work, do you know a way to fix it ? Thanks

Could you please update the license for this repo ?
Is it MIT ?

Hi, i'm trying to use this with preact and i get an error described here
If outDelay is 0 the bug doesn't happen, when you add a delay it triggers the above error

The error is in this line

Changing the if condition to fixes the problem:

if (!modals || modals.length === 0) {
  return null;
}

I don't know if this is the right fix or if it's another thing that's not right
@davidmfoley what do you think ?
Also @developit i saw that you answered that stackoverflow question, do you have any idea ?

I'm using react-router-modal in my project, and so far it seems to work fine everywhere I tested. Except it doesn't seem to work on Safari in iOS12. Please note that I did not test it with earlier versions of iOS or with a MacOS. The component that I have given to ModalRoute includes text fields, and basically the text fields are present there, but nothing is visible.

the property "modalWrapperClassName" is ignored on the ModalContainer, current reference that works seems to be "wrapperClassName". either the documentation is incorrect or the reference is.

Hi,
I want implement like bootstrap 3 style please help me how to use it.

Thanks.

Hello! How do you feel about adding style to ModalLink? seems like an easy add on https://github.com/davidmfoley/react-router-modal/blob/master/src/modal_link.js#L56. linkStyle, perhaps?

Add typescript types for the library

With:

<ModalRoute component={Bar} exact path="/bar" parentPath="/foo" />

when I log match from the Bar component, it looks like:

{
  isExact: false
  params: {}
  path: "/"
  url: "/"
}

Rerendering the ModalRoute with the same props, but as a <Route> I get:

{
  isExact: true
  params: {}
  path: "/bar"
  url: "/bar"
}

versions

[email protected]
[email protected] (Not using BrowserRouter)
[email protected]

I'm trying out the examples linked to from the readme here: https://davidmfoley.github.io/react-router-modal-examples/basic

The 'View Source' link points to https://github.com/davidmfoley/react-router-modal-examples/blob/masyoutter/src/examples/basic/ which does not exist.

I checked out the code and found that https://github.com/davidmfoley/react-router-modal-examples/blob/master/src/examples/basic/index.js has the correct link.

Maybe this means the site code just needs to be rebuilt somehow.

closeModal and BackdropClick should behave exactly the same as clicking back button on a browser. Adding a new history entry is very confusing for the user especially on Android mobile devices where the native back button is used extensively. I don't see any use case where adding the new history entry on close a modal is useful.

Hi really like this module.

Is it possible to close the modal by onClick?

Such as <h1 onClick={___}>Test</h1>

I did open correctly but but problem is, when closed modal.

localhost:4000/users/:id/task/:id

Since React changed versions componentWillReceiveProps and other will become deprecated in react 17.x.

Is there going to be an update soon?

Firstly, great project and thanks!

I am trying to find the easiest way to hide a modal after opening. May be worth adding this to the documentation, currently I only see clicking the backdrop as the only easy way.

Hi there!
I've made a simple routing system which handles the language param in a URL.
So if I type website.com/xx - > the appropriate language will be loaded.
website.com will load a default language. Pretty straightforward logic.

If I type website.com/en/modal1 the modal1 will be opened with English translation, what is good,
But the problem comes when I close the modal. The URL website.com/en/modal1 is reset to website.com without language parameter.

Is there a way to keep the URL parameter once the modal will be closed?
Or it should be a new feature?

Thanks!

Its possible?
Hello, I use this react-router-modal as route component of my user info modal and I have problem with connecting my component with redux.
Here is my User Container code which connects as route component to ModalRoute:

export namespace User {
  export interface Props extends RouteComponentProps<void> {
    user: UserStoreState;
    actions: typeof UserActions;
  }
}
@connect(mapStateToProps, mapDispatchToProps)
export default class User extends React.Component<User.Props>{
  constructor(props){
    super(props);
  }
  render(){
    console.log(this.props.user);
    return (
      <div className='modal user'>
        <label className="user-name">LOL</label>
        <button className="close-modal-button">
          <span className='button-bar'/>
          <span className='button-bar'/>
        </button>
      </div>
    )
  }
}


function mapStateToProps(state){
    return {
        user: state.user
    }
}
function mapDispatchToProps(dispatch){
    return {
        actions: bindActionCreators(UserActions as any, dispatch)
    }
}

Displays to console: undefined...

And there I wrote ModalRoute and ModalContainer

    <ModalRoute className='user-modal' path="/user/:userId" parentPath='/search?query=Mankubus'
                    component={() => <AsyncComponent
                      moduleProvider={user}/>}/>
        <ModalContainer history={history}/>

If you will talk about AsyncComponent , its worked with my others routes :)

<Route path="/game" component={() => <AsyncComponent
     moduleProvider={playground}/>}>
</Route>
<Route path="/search" component={() => <AsyncComponent
    moduleProvider={search}/>}>
</Route>

And sorry for my bad english ))

When a link is clicked that routes to a modal, I can't get the parent path to show in the background like in the examples. The modal itself shows fine and when clicking the backdrop it does go back to the parent route.

I'm using connected-react-router and redux.

Hi!
Is there a way to execute/call a custom function once any modals were closed?

Please add support for react 17

In you're readme, you're keeping out key example code such as how to import the required modules, for example; using <ModalContainer /> requires:
import { ModalContainer } from 'react-router-modal';

Hi, would it be possible to make a ModalRoute always mount last via a prop?
For example for when you need the modal behind to finish loading before mounting the front one.

Any ideas why an input field would lose focus after onChange is fired only in a ModalRoute?
container:

...
onChange = (event) => {
        this.setState({
            ...this.state,
            formIsDirty: true,
            values: {
                ...this.state.values,
                [event.target.getAttribute('field')]: event.target.value
            }
        });
    }

render() {
       return <ModalRoute path={ '*/event/' + (this.state.values.id ? 'edit/' + this.state.values.id : 'create') } parent={ '/content' }
            component={ () =>
                <div>
                    ...
                    <Edit
                        isEditing={ this.state.isEditing }
                        onDateChange={ this.onDateChange }
                        onDelete={ this.onDelete }
                        onSubmit={ this.onSubmit }
                        onChange={ this.onChange }
                        values={ this.state.values }
                    />
                    ...
                </div>
            } />;
    }
...

Edit looks like:

const Edit = ({ isEditing, onChange, onDateChange, onDelete, onSubmit, values }) => {
    return(
        <Grid
            container
            spacing={ 40 }
            direction={ 'row' }
            align={ 'left' }
            justify={ 'center' }
            style={ styles.container }
        >
            ...
            <input value={ values.title } field={ 'title' } type={ 'text' } placeholder={ 'enter the title of the event here...' } style={ styles.text } onChange={ onChange } />;
            ...
    );
};

i've also tried using onKeyPress and onKeyUp but same result

It will be nice to disable or change the default behaviour of the onBackdropClick in ModalRoute

Hi,

You wrote in your main doc page: 'To display a modal component "on top" of another component, both routes (the ModalRoute and the Route that renders the other component) must match.'

The downside is that when the modal is opened, the parent route's components are re-rendered which is a waste and slows down the modal's rendering! My parent route loads a heavy menu page. How can I stop the parent from re-rendering AND open the modal which has its own route?

I want to make modals that have their own route, if you route to them directly, but also show the page underneath them as whatever was loaded when the user clicked the link, and if the user clicks the backdrop it goes back to the page they were on before.

I am using react-router-last-location like this:

const Router = ({ lastLocation }) => (
  <Fragment>
    <Switch>
      <Route exact path='/' component={PageHome} />
      <Route exact path='/features' component={PageFeatures} />
      <Route exact path='/stories' component={PageStories} />
      <Route exact path='/pricing' component={PagePricing} />
      <Route exact path='/logout' component={PageLogout} />
      <Route exact path='/about' component={PageAbout} />
      <Route exact path='/terms' component={PageTerms} />
    </Switch>
    <ModalRoute path='/login' parentPath={lastLocation ? lastLocation.pathname : '/'} component={PageLogin} />
    <ModalRoute path='/register' parentPath={lastLocation ? lastLocation.pathname : '/'} component={PageRegister} />
    <ModalRoute path='/forgot' parentPath={lastLocation ? lastLocation.pathname : '/'} component={PageForgot} />
  </Fragment>
)

this works pretty well, but because everything is set to exact, nothing shows when the modals are visible, but all the other stuff works. When I turn off exact and re-arrange all the links so / is last, it displays the homepage underneath, not the lastRoute.

I made a codesandbox to illustrate

Here is what I am trying to accomplish:

• If the user comes straight to /login route, show / behind it.
• If the user clicks off the modal, show the link they were on before (or /, if they came straight there)
• If the user clicks the /login link from another page, keep that page under the login modal

Items 1&2 work great, it's just the last one. I am thinking a new prop like bgComponent or something would make sense, or maybe just show parentPath underneath, as well as when they click off.

How do you close a modal within a functional component?

Hey there!
I implemented the modal on a list view. I can open the modal perfectly by clicking on a list item. The problem is when clicking the backdrop is that it navigates forward to the original list view instead of actually going back causing it to loose the scroll pretty much starting over the top of the list. I guess it would be awesome to have a behaviour like the browser's back button which goes back and automatically scrolls to the original position of the list for when the item was clicked. Does that makes sense?

Thanks a lot for the good work!

Hi!
I have a one-page website and a component called ‘Items’. In that component I’m using the react-router-modal.
Items.js:

function ModalsName(props) {
  return (
    <div className="modal-dialog modal-lg">
    </div>  
  );
}

class Items extends React.Component {
  render() {
    return (
      <div className="container">
              <Link to="/modalsurl"> </Link>
        <ModalLink component={ModalsName} path={`/modalsurl`} />
         …other links
      </div>
    )
  }
}

module.exports = translate()(Items);

In such way everything works just fine. The modal is accessible by it’s own URL.

But if I try to add a router to the entry point of my app - index.js. The problems occurs. Firstly the called modal doesn’t open – I see only blank screen without any errors. Once I come back to previous page it hangs with a preloader. Only F5 re-renders the page.
Index.js:

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { ModalContainer } from 'react-router-modal'; 

class App extends React.Component {

  render() {
    return (
        <LandingPage />
    )
  }
}


ReactDOM.render(
  <I18nextProvider i18n={i18n}>
    <BrowserRouter>
      <div>
        <Route exact path="/" component={App} />
        <ModalLink path="/modalsurl" component={Items} />        
        <Route component={NoMatch} />
      </div>
    </BrowserRouter>
  </I18nextProvider>,
  document.getElementById('app')
);

It seems like a bug...

React Portals solves how to render a Modal on top of every component

First of all, thanks for the library! I was just about to create the same exact thing.
What do you think about supporting transitions here? (Like fade in/fade out)

Is it possible to add some paths inside the modal? How could it be implemented?
I'd like to implement a settings modal with a lot of categories

Hey,

I'm using react-router-dom 4 with react-router-modal and I have a dynamic segment/parameter in my route like this:

<ModalRoute
  parentPath="/"
  path="/users/:userId"
  component={UserProfile}
/>

and my child component is as simple as follows:

const UserProfile = props => {
  return <div>{props.match.params.userId}</div>
}

When I visit:
http://localhost/users/3234

The modal is being displayed as:
<div>undefined</div>

I expect to have the match with the parameter {userId: 3234} and path to be /users/3234. However, the params object is empty, and the path is "/"

Am I doing something wrong?

How do I access match.params from UserProfile?

The bodyModalClassName property is ignored. When modal is open, the class react-router-modal__modal-open is added to the body.

When I update react version then throw below error message from this package.

Actually will be update react version in your package. Then solved this issue.

Provide auto-handling of escape, as requested by @johnhult, or add a full-fledged dialog example with esc key handling.

Hi everyone!
Here is an example:
<ModalRoute component={Component} path="/path" />
<ModalContainer backdropClassName="modal__backdrop" modalClassName="modal modal_animation_to-right" modalInClassName="modal_in" modalOutClassName="modal_out" outDelay={30000} />

When navigate to /path modal gets modal_in class. Then click 'Back' button in browser => modal gets modal_out class and Component unmount immediately, then after 30000s modal unmounts too. Is it normal behavour? I expect Component to be unmounted at the same time with modal after outDelay.

Also the last modal unmounting without any delay specified in outDelay.

Using

• react 16.6.3
• react-router 4.3.1
• react-router-modal 2.0.0-rc2

We have a custom Modal based on MaterialUI

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

How do I specify the modal router in this type of structure?

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      }
    ]
  }
];

Hi!
It would be nice to have an option to show the 'x' close button at top and/or a close button at bottom