react-media-query-blocks

Install

npm install react-media-query-blocks
 or
yarn add react-media-query-blocks

Usage

import React from 'react'
import {
  PhoneOnly,
  TabletPortaitOnly,
  TabletLandscapeOnly,
  DesktopOnly
} from "react-media-query-blocks";

function App() {
    return (
      <div className="App">
        <PhoneOnly>
          <OnlyVisibleOnPhone />
        <PhoneOnly/>

        <TabletPortaitOnly>
          <OnlyVisibleOnTabletPT />
        <TabletPortaitOnly/>

        <TabletLandscapeOnly>
          <OnlyVisibleOnTabletLS />
        <TabletLandscapeOnly/>

        <DesktopOnly>
          <OnlyVisibleOnDesktop />
        <DesktopOnly/>
      </div>
    )
}

API

If no custom breakpoints are specified the default breakpoints will be used, (recommended) because I think the default breakpoints are working very well in most cases. If you need a custom size range where your components need to be visible feel free to use the props available to customize your component.

Components	Custom breakpoints	Default	Default
PhoneOnly	visibleTo	0	599
TabletPortaitOnly	visibleFrom, visibleTo	600	899
TabletLandscapeOnly	visibleFrom, visibleTo	900	1199
DesktopOnly	visibleFrom, visibleTo	1200	1799

Example with custom breakpoints below. You can also use the same component multiple times with different breakpoints, below you can see 2 PhoneOnly components one with default breakpoints the other one with custom breakpoints.

{/* PhoneOnly */}
        <PhoneOnly visibleTo={900}>
          <OnlyVisibleOnPhone />
        <PhoneOnly/>
        <PhoneOnly>
          <OnlyVisibleOnPhone />
        <PhoneOnly/>
{/* PhoneOnly */}

        <TabletPortaitOnly>
          <OnlyVisibleOnTablet />
        <TabletPortaitOnly/>

        <DesktopOnly>
          <OnlyVisibleOnDesktop />
        <DesktopOnly/>

License

MIT © ivanjeremic