Skip to main content

useScreenSafeArea

React sensor hook that tracks env(safe-area-inset-*)

Usage​

Live Editor

function Demo() {
  const [top, right, bottom, left] = useScreenSafeArea();
  return (
    <div>
      <div>
        top: <>{top}</>
      </div>
      <div>
        bottom: <>{bottom}</>
      </div>
      <div>
        left: <>{left}</>
      </div>
      <div>
        right: <>{right}</>
      </div>
    </div>
  );
}
Result
Loading...

API​

useScreenSafeArea​

Returns​

readonly [string, string, string, string, _.DebouncedFunc<() => void>]: A tuple with the following elements:

  • top safe distance
  • right safe distance
  • bottom safe distance
  • left safe distance
  • munual update function

Arguments​