react-grid-layout breakpoints

2
votes

I'm looking at using the react-grid-layout component but the documentation is not good when it comes to explaining the terminology. Here are my questions:

  1. What's the difference between ReactGridLayout and ResponsiveReactGridLayout? What exactly is meant by "responsive"?
  2. For ResponsiveReactGridLayout, what is meant by a "breakpoint"? Why do we need it and how should it be set?
1
reactjsreact-grid-layout
Did you have a chance to look at source code? - The Reason

1 Answers

0
votes

It sounds like you're not familiar with response UIs. In a nutshell, how your app adapts to being displayed at different screen sizes - typically desktop vs mobile.

Frameworks like bootstrap popularised responsive UIs by providing support out-of-the-box. The bootstrap documentation explains breakpoints.

In this instance, the number of grid columns changes depending upon the screen resolution (typically width in pixels), it will switch between named resolutions (breakpoints) - 'lg', 'md', 'sm', 'xs' etc.

The readme for react-grid-layout mentions responsive props & breakpoints.