junhoyeo / react-mobile-sized-view

🍑 Responsive Mobile-sized Wrapper for React - Easily prototype your mobile-sized web apps with desktop support

react-mobile-sized-view

• Featured on reactjsexample.com(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
• junhoyeo/NIKE-THE-DRAW-Calendar
• stevejkang/vue-mobile-sized-view

🚀 Add your apps here too!

📦 Usage

yarn add styled-components && yarn add -D @types/styled-components
yarn add react-mobile-sized-view

import React from 'react';
import MobileSizedView from 'react-mobile-sized-view';

const App: React.FC = () => (
  <MobileSizedView
    style={{ backgroundColor: '#F6DADB' }}
    screenStyle={{
      backgroundColor: '#fefefe',
      boxShadow: '-31px -31px 62px #FAE0E0, 31px 31px 62px #EAB6BE',
    }}
    isRounded
  >
    <h1>Title in Screen</h1>
  </MobileSizedView>
);

export default App;

⚓️ Hooks

import { useScreenSize } from 'react-mobile-sized-view';

const SomeComponent: React.FC = () => {
  const { width: screenWidth } = useScreenSize();
  // Comes with SSR support

  return (
    <div
      style={{
        width: screenWidth,
        height: screenWidth,
        backgroundColor: 'coral',
      }}
    />
  );
};

• useScreenSize: Use this to get the size of the MobileSizedView
• useWindowSize