https://github.com/junhoyeo/react-mobile-sized-view
🍑 Responsive Mobile-sized Wrapper for React - Easily prototype your mobile-sized web apps with desktop support
https://github.com/junhoyeo/react-mobile-sized-view
component mobile mobile-view prototype react
Last synced: 24 days ago
JSON representation
🍑 Responsive Mobile-sized Wrapper for React - Easily prototype your mobile-sized web apps with desktop support
- Host: GitHub
- URL: https://github.com/junhoyeo/react-mobile-sized-view
- Owner: junhoyeo
- Created: 2020-06-25T01:42:42.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-10-16T17:42:50.000Z (over 2 years ago)
- Last Synced: 2025-10-03T23:45:44.732Z (4 months ago)
- Topics: component, mobile, mobile-view, prototype, react
- Language: TypeScript
- Homepage:
- Size: 5.68 MB
- Stars: 30
- Watchers: 3
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-mobile-sized-view
- Featured on [reactjsexample.com](https://reactjsexample.com/a-neumorphism-style-mobile-sized-view-component-for-react/)(thx editor 🙇)
> 🍑 Responsive Mobile-sized Wrapper for React
## 🚀 Examples
> ⚠️ Warning: **The following examples can be using the outdated version of this package, and can not be the best usage here**(this package was very ugly before I tidy up lol). Please use issues and PRs in this repository for sharing more ideas and suggestions, including proper exploits
- [junhoyeo/buymetesla](https://github.com/junhoyeo/buymetesla)
- [junhoyeo/NIKE-THE-DRAW-Calendar](https://github.com/junhoyeo/NIKE-THE-DRAW-Calendar)
- [stevejkang/vue-mobile-sized-view](https://github.com/stevejkang/vue-mobile-sized-view)
> **[🚀 Add your apps here too!](https://github.com/junhoyeo/react-mobile-sized-view/issues/new)**
## 📦 Usage
```bash
yarn add styled-components && yarn add -D @types/styled-components
yarn add react-mobile-sized-view
```
```tsx
import React from 'react';
import MobileSizedView from 'react-mobile-sized-view';
const App: React.FC = () => (
Title in Screen
);
export default App;
```
## ⚓️ Hooks
```tsx
import { useScreenSize } from 'react-mobile-sized-view';
const SomeComponent: React.FC = () => {
const { width: screenWidth } = useScreenSize();
// Comes with SSR support
return (
);
};
```
- [useScreenSize](https://github.com/junhoyeo/react-mobile-sized-view/blob/main/src/hooks/useScreenSize.ts): Use this to get the size of the `MobileSizedView`
- [useWindowSize](https://github.com/junhoyeo/react-mobile-sized-view/blob/main/src/hooks/useWindowSize.ts)