Semantic-UI-React Responsive component renders element in spite of minWidth/maxWidth prop

Question

I have a component where I want to render different components based on screen size. If I reload the page while on mobile view, everything is ok, NavBarMobile is rendered and NavbarDesktop is not.

If I reload the page while on desktop view, then my NavbarMobile is rendered again instead of NavBarDesktop.

If I start resizing the screen to mobile and back to desktop view, NavBarDesktop is rendered correctly.

So, the problem is first page load while in Desktop view, how to fix that?

 const { mainAppComponents, } = this.props
    const { visible, } = this.state
    return (
      <Fragment>
        <Responsive maxWidth={767}>
          <NavBarMobile
            onPusherClick={this.handlePusher}
            onToggle={this.handleToggle}
            rightItems={rightItems}
            visible={visible}
          >
            {mainAppComponents.header}
            {mainAppComponents.routes}
          </NavBarMobile>
        </Responsive>

        <Responsive minWidth={768}>
          <NavBarDesktop rightItems={rightItems}>{mainAppComponents.header}</NavBarDesktop>
          {mainAppComponents.routes}
        </Responsive>
      </Fragment>
    )

Answer 1

Igor-Vuk, I put together a quick codesandbox example just to make sure there was not a problem with how you are trying to implement the min/max width props. As you can see from this example, they do in fact work as expected. https://codesandbox.io/s/98pk46l7vr

Without seeing the rest of your component, or application, the issue may be due to something in your router. I'd recommend trying to remove some of the other components you are returning as children of the Responsive component to see if it starts working as expected (like in my codesandbox example). If it works, then you know the problem is somewhere in the children. If it does not work then there is a greater problem above in your app.

If you are using SSR, on initial load the content was rendered and served with the Responsive component having no knowledge of the viewport. So you may need to also add a CSS media query.