CODEWITHSUNDEEP
reactjsmobilelayoutreact-redux
rajit
rajit

Reputation: 154

Creating Different mobile layout for a component in ReactJs

How can we create a completely different (mobile type layout) for a component (having a different desktop type layout) using ReactJs. (Not Responsive , responsive is something css has to take care of.) It should be different layout for the component i.e here Creating a page with a menu(header menu) for desktop screens which becomes a navigation sidebar with logo on small screen.

Upvotes: 5

Views: 29059

Answers (2)

Abhishek
Abhishek

Reputation: 1714

Checkout react-responsive, You can use media query to render different component depending on device size.

Upvotes: 9

jakee
jakee

Reputation: 18556

Honestly, a simple resposive css layout may be the best solution, but the steps are to

1) Detect in JS if user in on mobile or desktop. For example this question has a good suggestion as an answer: Detecting a mobile browser

2) Use it to decide in your root component that which layout to use:

function isMobile() {
  // some js way to detect if user is on a mobile device
}

class Root extends Component {
  render() {
    return isMobile() ? ( <MobileLayout /> ) : ( <DesktopLayout /> )
  }
}

Upvotes: 24

Related Questions