CODEWITHSUNDEEP
reactjs
user15685422
user15685422

Reputation:

Render different layouts in react depending on screen's size ( responsive )

Is there any library or something that can allow me to change mi layout depending on the screen's size?

I'm getting to a point in my projects where, using media queries isn't enough and i would love being able to change the design of my App when using a phone for example

Let me give you an example...

const size = min-width: 900px;

const layout = () => {

return(

<>
{size && <smallLayout />}

{!size && <Layout />
</>

)

}

If you know something that can help me with that, please share it with me, i'll thank you for it !

Upvotes: 1

Views: 1155

Answers (1)

Emre A
Emre A

Reputation: 259

For device or browser detection you can use a package like: react-device-detect

They also provide components for you; but you dont have to use it; you can still use ısMobile parameter to conditionaly render your own different components.

<BrowserView>
    <h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
    <h1> This is rendered only on mobile </h1>
</MobileView>

Upvotes: 1

Related Questions