Necessary Pigeonholing Mechanism

    react-hide-show-utils
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    react-hide-show-utils

    React utility components for showing or hiding children components, based on media queries.

    Based and inspired on what's suggested by the <HideAt> and <ShowAt> components shown in this block of code from this AirBnb Engineering's blog post.

    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?

    These components use the browser's window.matchMedia API internally to be notified when a media query is active and hide or show their children accordingly.

    Because of this:

    Using matchMedia saves us from having to listen to and manage the window's resize event, and all the complications that come with it.

    Install

    # via npm 
    npm i --save react-hide-show-utils
     
    # via yarn 
    yarn add react-hide-show-utils

    Usage

    <HideAt>

    Un-mounts the children inside it, when the declared breakpoint becomes active. And logically, it mounts it again when the breakpoint becomes inactive again.

    Example

    import { HideAt } from 'react-hide-show-utils';
     
    <HideAt breakpoint="(min-width: 32em)">
      <Button text="I'm not rendered on wide viewports!" />
    </HideAt>;

    <ShowAt>

    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 breakpoint="(max-width: 8em)">
      <h1>I'm only shown on narrow viewports!</h1>
    </ShowAt>;

    Notes

    • 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.

    Dependents (0)

    Install

    npm i react-hide-show-utils

    DownloadsWeekly Downloads

    113

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    22.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • berbaquero