useScreenSafeArea

Category

Browser

Export Size

426 B

Last Changed

5 days ago

Reactive env(safe-area-inset-*)

Demo

Usage

In order to make the page to be fully rendered in the screen, the additional attribute viewport-fit=cover within viewport meta tag must be set firstly, the viewport meta tag may look like this:

<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />

Then we could use useScreenSafeArea in the component as shown below:

import { useScreenSafeArea } from '@reause/core'

const {
  top,
  right,
  bottom,
  left,
  update,
} = useScreenSafeArea()

For further details, you may refer to this documentation: Designing Websites for iPhone X

Type Declarations

export interface UseScreenSafeAreaReturn {
    top: string;
    right: string;
    bottom: string;
    left: string;
    update: () => void;
}

export function useScreenSafeArea(): UseScreenSafeAreaReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e690c - fix(core): resolve useScreenSafeArea audit findings (#634)