Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukem512/react-mobile-only
A react component that will only display its children on mobile resolutions.
https://github.com/lukem512/react-mobile-only
component jsx mobile mobile-web react
Last synced: about 1 month ago
JSON representation
A react component that will only display its children on mobile resolutions.
- Host: GitHub
- URL: https://github.com/lukem512/react-mobile-only
- Owner: lukem512
- Created: 2019-11-15T12:16:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-11-16T10:41:10.000Z (over 5 years ago)
- Last Synced: 2024-12-15T21:12:14.301Z (2 months ago)
- Topics: component, jsx, mobile, mobile-web, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-mobile-only
- Size: 5.86 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-mobile-only
[](https://www.npmjs.com/package/react-mobile-only) [](https://www.npmjs.com/package/react-mobile-only) [](https://www.npmjs.com/package/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.```js
import MobileOnly from 'react-mobile-only'const AppBanner = (props) => (
Download our app from the Play Store or the App Store.
)
```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](https://www.styled-components.com/docs/advanced#theming) theme.
## Related
See [react-desktop-only](https://github.com/lukem512/react-desktop-only)
## License
MIT