- Featured on reactjsexample.com(thx editor 🙇)
🍑 Responsive Mobile-sized Wrapper for React
⚠️ 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
yarn add styled-components && yarn add -D @types/styled-components
yarn add react-mobile-sized-viewimport 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;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