$ npm install react-iphone-layout --save-dev
$ yarn add react-iphone-layout --dev- 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)
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 | Type | Default |
|---|---|---|
| isStatusBar | boolean | true |
| position | "top", "right", "bottom", "left" |
"right" |
| mode | "iPhone", "laptop" |
"iPhone" |
| minSize | number | 60 |
| defaultSize | number | 75 |
| maxSize | number | 100 |
- 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.
MIT