react-iphone-layout
v1.2.0
Published
React iPhone layout in web browser
Downloads
12
Readme
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
- CodeSandbox: Try out the react-iphone-layout library in an interactive online editor. Click here to view the demo.
License
MIT