I want to write a hook which returns the latest --safe-area-inset-bottom value.
const safeAreaInsetBottom = useSafeAreaInsetBottom();
the first value is easy to get. Something like the following will do:
getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom')
but this would not consider future changes of the viewport (i.e. a mobile screen changing from portrait to landscape). I was wondering what would be the best way to achieve this (listeners, mutation observers etc..)