A Neumorphism Style Mobile Sized View Component For React

react-mobile-sized-view

Mobile sized view component for React, with support for neumorphism ui.

? 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
    backgroundColor="#F6DADB"
    screenBackgroundColor="#fefefe"
    screenLightShadow="-31px -31px 62px #FAE0E0"
    screenDarkShadow="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
• useWindowSize

GitHub

https://github.com/junhoyeo/react-mobile-sized-view