Skip to content

v1.0.0
Compare
Choose a tag to compare
@BangDori BangDori released this 25 May 06:30
· 14 commits to main since this release
v1.0.0
3ee0e7c
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

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.
Assets 2
Loading