Usage no npm install needed!

<script type="module">
  import reactMobileOnly from 'https://cdn.skypack.dev/react-mobile-only';
</script>

README

react-mobile-only

A react component that will only display its children on mobile resolutions.

Installation

The react-mobile-only package is available from NPM via yarn or the npm CLI.

npm i --save react-mobile-only

Usage

The component can be used by wrapping child components to restrict their display to mobile devices.

import MobileOnly from 'react-mobile-only'

const AppBanner = (props) => (
  <MobileOnly>
    Download our app from the <a href={app.play_store_url}>Play Store</a> or the <a href={app.app_store_url}>App Store</a>.
  </MobileOnly>
)

By default, the component will display for screen resolutions below 768px. By passing a mobileSize prop to the component, or by setting theme.mobileSize in the styled-components theme.

License

MIT