@walrusk/react-responsive-div
v1.0.2
Published
Responsive React container using breakpoints based on container (not viewport) width.
Downloads
8
Readme
React Responsive Div
Responsive React container using breakpoints based on container (not viewport) width.
The core of https://github.com/philipwalton/responsive-components ported to React with slight behaviour modifications and using hooks to manage creation/cleanup of observers for each container instead of using a global observer.
Default breakpoints:
{ SM: 384, MD: 576, LG: 768, XL: 960, }
Usage:
npm install --save @walrusk/react-responsive-div
import Div from '@walrusk/react-responsive-div';
<Div>
...
responsive content
...
</Div>
const customBreakpoints = {
SM: 384,
MD: 576,
LG: 768,
XL: 960,
};
<Div breakpoints={customBreakpoints}>
...
content
...
</Div>
Output based on container size:
<div class="SM">... content ...</div>
or
<div class="MD">... content ...</div>
or
<div class="LG">... content ...</div>
or
<div class="XL">... content ...</div>
Apply CSS rules based on container size using classes instead of using media queries based on viewport size.
.SM .column { flex:0 0 100%; }