React utility components for showing or hiding children components, based on media queries.
How are these useful?
Even though hiding or showing components can easily be done with just CSS as well, they would still be part of the DOM, which can complicate things in some not-so-rare situations.
With these utility components, the children element will actually be added/removed from the DOM. This avoids possible redundant elements at the same time, and results in a leaner DOM.
How do they work?
Because of this:
These components only work on the browser. On the server, nothing declared inside these components is rendered.
Since it uses
matchMedia, you might need a polyfill for support in legacy browsers (like IE9).
- I suggest to consider using the polyfill.io service.
matchMedia saves us from having to listen to and manage the window's
and all the complications that come with it.
# via npmnpm i --save react-hide-show-utils# via yarnyarn add react-hide-show-utils
Un-mounts the children inside it, when the declared breakpoint becomes active. And logically, it mounts it again when the breakpoint becomes inactive again.
import HideAt from 'react-hide-show-utils';<HideAt ="(min-width: 32em)"><Button ="I'm not rendered on wide viewports!" /></HideAt>;
Mounts the children component inside, when the declared breakpoint becomes active. And logically, it un-mounts it when the breakpoint becomes inactive again.
import ShowAt from 'react-hide-show-utils';<ShowAt ="(max-width: 8em)"><h1> only shown on narrow viewports!</h1></ShowAt>;
- Before the children component is even mounted for the first time, the breakpoint is checked, to determine whether it's active or not. Therefore, the children will not even be rendered initially, if it's not meant to based on the utility used and breakpoint declared.