Introduction

• useSafeArea tracks height/width of notch iPhone X/iPhone 11 or any devices have unsafe area.
• You can avoid from notches easily

const {
    top,
    right,
    bottom,
    left,
} = useSafeArea();

Getting Started

• You need to import useSafeArea.

For PWA

You need to these lines to your public html.

	<meta name="viewport"
		content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, viewport-fit=cover" />
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

From Collection

import { useSafeArea } from "@reactivers/hooks";

From Package

import { useSafeArea } from "@reactivers/use-safe-area";

Interfaces

Returns

interface ISafeArea {
    top: number;
    right: number;
    bottom: number;
    left: number;
}

Example

Run Example