React-iPhone-Layout

Installation

$ npm install react-iphone-layout --save-dev

$ yarn add react-iphone-layout --dev

Features

• Web App Compatibility: Easily integrate iPhone layout into your web applications.
• Web View Support: Optimize for iPhone on the web to provide a seamless web view.
• Dynamic iPhone View Resizing: You can dynamically adjust the size of the iPhone view.
• Real-Time View Switching: Check the iPhone view and laptop view in real-time through a control box, allowing for seamless testing and optimization of layouts across different devices.
• Rotation iPhone: provide a screen rotation feature for the iPhone. (The internal content does not rotate)

Getting Started

import { IPhoneLayout } from 'react-iphone-layout';
import 'react-iphone-layout/dist/ReactIPhoneLayout.css'; // ✨

function App() {
  return (
    <IPhoneLayout>
      <p>this is iPhone layout!!!</p>
    </IPhoneLayout>
  );
}

Props

Props	Type	Default
isStatusBar	boolean	true
position	"top", "right", "bottom", "left"	"right"
mode	"iPhone", "laptop"	"iPhone"
minSize	number	60
defaultSize	number	75
maxSize	number	100

Demo

• Storybook: Try out the react-iphone-layout library in a dynamic environment to view and test each component. Click here to view the demo.
• CodeSandbox: Try out the react-iphone-layout library in an interactive online editor. Click here to view the demo.

License

MIT