31 lines
999 B
JavaScript
31 lines
999 B
JavaScript
import { createContext, useEffect, useState } from 'react';
|
|
|
|
export const SafeAreaContext = createContext({ top: 0, bottom: 0 });
|
|
|
|
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>
|
|
);
|
|
};
|