mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekay
c183da5389
The loader and the Next plugin only existed to drive webpack; Next runs on Turbopack and Vite has its own plugin. kitchen-sink and the integration app serve through vite, the optimizer suite drops the webpack name, and its fixture packages join the workspace so a fresh checkout links @my/ui.
32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
// I don't use the real useSafeAreaInsets() hook, since
|
|
// 1) the SafeAreaProvider forces you to render null on Web until it measures
|
|
// 2) you might not need to support it, unless you're doing landscape stuff
|
|
// 3) react-native-safe-area-context has a massive import on Web
|
|
// see: https://github.com/th3rdwave/react-native-safe-area-context/pull/189#issuecomment-815274313
|
|
// 4) most importantly, I think you can just use the env(safe-area-inset-bottom) CSS variable instead
|
|
// after all, safe area code is few-and-far-between, so if you have to write some platform-speciifc code for it,
|
|
// that is probably better than a massive bundle size for little benefit
|
|
|
|
import type { useSafeArea as nativeHook } from './use-safe-area'
|
|
|
|
const area = {
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
|
|
// you could also use CSS env variables like below:
|
|
// but you'll have to be sure to override the types for `useSafeArea`
|
|
// and make sure to never add numbers and strings when you consue useSafeArea
|
|
// just keep in mind that the env() doesn't work on older browsers I think
|
|
|
|
// top: `env(safe-area-inset-top)`,
|
|
// right: `env(safe-area-inset-right)`,
|
|
// bottom: `env(safe-area-inset-bottom)`,
|
|
// left: `env(safe-area-inset-left)`,
|
|
}
|
|
|
|
export function useSafeArea(): ReturnType<typeof nativeHook> {
|
|
return area
|
|
}
|