39 lines
1.4 KiB
JavaScript
39 lines
1.4 KiB
JavaScript
import { createContext, useEffect, useState } from 'react';
|
|
|
|
export const SafeAreaContext = createContext({ top: 0, bottom: 0 });
|
|
|
|
// This provider reads and stores the computed safe area
|
|
// on devices with notches/etc. (iPhone X, for example)
|
|
//
|
|
// This is done by reading the CSS Properties --safe-area-top and --safe-area-bottom
|
|
// and then storing them as state values.
|
|
//
|
|
// These values are useful for JS-driven interactions, such as a modal that
|
|
// will drag in and out but needs to offset for the safe region.
|
|
export const SafeAreaProvider = ({ children }) => {
|
|
const [safeAreaTop, setSafeAreaTop] = useState(0);
|
|
const [safeAreaBottom, setSafeAreaBottom] = useState(0);
|
|
|
|
useEffect(() => {
|
|
// I don't know why, but we can't get the value of this CSS variable
|
|
// until a bit of a delay, maybe something with Next?
|
|
setTimeout(() => {
|
|
const safeAreaTop = parseInt(
|
|
window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top')
|
|
);
|
|
const safeAreaBottom = window
|
|
.getComputedStyle(document.documentElement)
|
|
.getPropertyValue('--safe-area-bottom');
|
|
|
|
setSafeAreaTop(safeAreaTop);
|
|
setSafeAreaBottom(safeAreaBottom);
|
|
}, 500);
|
|
}, []);
|
|
|
|
return (
|
|
<SafeAreaContext.Provider value={{ top: safeAreaTop, bottom: safeAreaBottom }}>
|
|
{children}
|
|
</SafeAreaContext.Provider>
|
|
);
|
|
};
|