Crow's Nest

Provides the safe full screen area that can be used without being cut off by the shape of the display or browser UI elements.

Crow's Nest observes the display shape (notch / Dynamic Island), the PWA title bar (Window Controls Overlay), and the on-screen keyboard, and exposes a single "observable" safe area that content can occupy without being clipped by any of them.

Installation

npm i @nhtio/crows-nest

Usage

import { CrowsNest } from '@nhtio/crows-nest'

const nest = new CrowsNest()

// Read the current safe area
console.log(nest.observable) // { width, height, offset: { top, left, bottom, right } }

// Bind an element so it stays within the safe area automatically
const el = document.getElementById('app')
nest.bindHtmlElement(el)

// React to changes
nest.on('observable.changed', (is, was) => {
  // ...
})

// Tear down when finished (e.g. on component unmount) to remove listeners
nest.destroy()

For more information, see the official documentation