How to render different components based off device size?

Question

I'm looking to build a responsive app that has a break point at 1024. When a user logs in/signs up, there will be a few questions to be answered.

On mobile, this will be rendered as one question on the screen at a time. The user will then see a sliding transition screen moving them to the next question.

Once the break point is exceeded, all questions will be rendered on the screen simultaneously.

Does anyone know if there are any styling frameworks that work with something like this, or any work-arounds for a conditional render based off pixel width?

This will be a React based app. Currently using foundation for the styling.

Thank you!!

Solution 1

You can use CSS media queries that set display: none to create breakpoints for different sizes. Or you can use the React Responsive library to render React Components based on media queries.

css Media Query example (insert this into a .css file and include it into your app):

//Any device with className .loginFeature below 1024px will not be displayed
@media (max-width: 1024px) {
  .loginFeature:{
    display: none;
  }
}

React Responsive Example:

<MediaQuery query="(max-device-width: 1024px)">
  //Insert any components/html here that you want rendered thats below 1024px
</MediaQuery>

Solution 2

For your react project check out react-responsive. Use it to import a component called MediaQuery. MediaQuery will only render its child components when the conditions you set for it are met.

To Install:

yarn add react-responsive

Add this line to your project to import MediaQuery:

import MediaQuery from "react-responsive";

Then use MediaQuery to conditionally render your content or in your case questions:

<MediaQuery query=(min-width: 1024px)>
    <div className="question">
        ...
    </div>
</MediaQuery>

You can find more information about react-responsive here.

Comments

[MEnf]

Also, there are a couple UI-frameworks that have built in Grid Layouts that make rendering components responsively easier such as React-Bootstrap and Semantic-ui-react. react-bootstrap.github.io react.semantic-ui.com/introduction

[peterchic]

Thanks brub! I will check that out now.

[peterchic]

Thanks MEnf, I'm looking into the React Responsive example now. I was originally thinking about dealing with a switch case and rendering out different components depending on the device size. Using this example, it seems like I can avoid that and just include the query=() to render accordingly. Does that sound right to you?

[MEnf]

Yes sir! One thing to remember however is that these are just break points. If a user is on the computer, they can just adjust their screen size by simply resizing their brower window or using dev tools. So try to take that into account when designing around mobile/tablet/computer devices.

[MEnf]

If you're looking to target mobile/tablet you usually need to target operating systems rather than breakpoints. Check this thread for an example: stackoverflow.com/questions/6666907/…