3

I am looking for some recommendations on what libraries, components, approaches to use when building a fully RESPONSIVE React app today?

Should I base on hooks or old school media queries? Maybe some better solution somewhere out there ?

user359698
  • 193
  • 4
  • 11

4 Answers4

1

I suggest using a component library, for the latest components, a responsive component library such as rsuitejs or material design components should do just fine.

Links:

https://rsuitejs.com/en/ https://material-ui.com/

genzdev
  • 73
  • 6
1

Have a look at Antd or material-ui

or you can use regular CSS & style your components (my favourite way)

Ahmed I. Elsayed
  • 2,013
  • 2
  • 17
  • 30
1

Like others mentioned, there are quite a few packages out there for responsive design- CSS frameworks, React component libraries, etc. It is also not hard to roll your own using flexbox and/or grid.

As far as React-centric approaches go, here is one that is pretty efficient. It assumes you are utilizing SSR.

  1. Use Context API to create a Breakpoint Provider component. Its job is to keep track of the current breakpoint, and listen to the resize event to change state as needed. In the constructor, accept the default viewport size. This can be populated server-side by utilizing user-agent sniffing.

  2. Use the Consumer from your Breakpoint Context to expose the current viewport size. This can be used to conditionally load components based on viewport, instead of rendering them and then hiding them with CSS with media queries. You are sending less CSS/HTML down the wire this way, spending less time processing JS and CSS, and for larger sites it can put a substantial dent in loading time. :)

adamz4008
  • 660
  • 4
  • 10
  • Would this work with NextJS SSR Pages with the useInitialProps? I've ran into a situation where I would need to dynamically import a page or component because SSR wasn't working with the .window. – lakerskill Oct 31 '19 at 18:38
  • @lakerskill Something like this should work great:``` static async getInitialProps({ ctx }) { const userAgentHeader = ctx.req.headers['user-agent']; return { userAgentHeader }; } ``` – adamz4008 Oct 31 '19 at 18:41
  • @lakerskill also not sure if that comment would help with your problem, i thought you were asking about how to pass user agent header to the breakpoint component using nextjs, but if you're just having problems with accessing window in general in your components you can just access window in componentDidMount to ensure we are running on client and not on server...hope that helps! – adamz4008 Oct 31 '19 at 18:46
  • Appreciate it. I'll have to give that a try. – lakerskill Nov 01 '19 at 19:56
0

I just found out a small npm package that implements a Provider and a Consumer for breakpoints. Basically the idea exposed by adamz4008:

react-socks

I tried it and it's pretty straightforward. Plus it seems the lightest weigthed option vs using something bigger as material-ui or antd (which are great but would be an overkill if you won't use their components or if you're are already using some component library with no breakpoints).

There's also a very simple tutorial on how to use it here

As a super quick "meta-example", you use its BreakpointProvider to wrap your React application component (top-most) and then inside any child component of the wrapped component, you can use the Breakpoint component to do things like:

<>
  <Breakpoint small down>
    <MySmallComponent />
  </Breakpoint>
  <Breakpoint medium up>
    <MyBigComponent />
  </Breakpoint>
</>

"small" is one of five custom breakpoints provided. "down" means, this, or smaller. Similar logic goes for "medium" and "up", meaning "medium sized or larger screens".

If you want to implement this yourself, you should do a provider component with a listener on the resize event. You can find plenty of examples of how to do that when you search for "responsiveness + react" on google, but here is one from this community :) (check the answer from speckledcarp)

Lalo Mores
  • 91
  • 9