v1.2.0

Changelog

1. Add Rotation features for iPhone

v1.1.1

Changelog

1. Change package manager yarn to npm
2. Fixed iPhone switching button position

v1.1.0

Changelog

• Add Control Box
  • 1. iPhone Mode
  • 2. Notebook Mode
  • 3. iPhone Size Up
  • 4. iPhone Size Down
• Real-Time View Switching Mode

v1.0.0

React-iPhone-Layout

Installation

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

Features

• Web App Compatibility: Easily integrate iPhone-like layouts into your web applications.
• Web View Support: Optimize your web views to provide a seamless iPhone viewing experience.
• Dynamic iPhone View Resizing: Adjust the size of the iPhone view dynamically to fit different content needs.

Quickstart

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
isDynamicSize	boolean	false
minSize	number	60
defaultSize	number	75
maxSize	number	100

Demo

You can see live demos and interact with the library in the following ways:

• CodeSandbox: Try out the react-iphone-layout library in an interactive online editor. Click here to view the demo.
• Storybook: Explore various use cases and component configurations in our Storybook setup. Click here to view the Storybook.