Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render different components based off device size?

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!!

like image 516
peterchic Avatar asked Dec 18 '17 20:12

peterchic


People also ask

How can I hide a component in React depending on the screen size?

To hide elements simply use the . d-none class or one of the . d-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.

What is conditional rendering React?

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript.


1 Answers

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>
like image 110
MEnf Avatar answered Sep 21 '22 13:09

MEnf