PUURU Hooks

积累一些常用的 hooks

[TOC]

useDetectColorScheme

监测浏览器的颜色是 light 或者 dark

const colorScheme = useDetectColorScheme()

useLocalStorage

方便序列化和反序列化 localStorage 数据的 hook

const [account, setAccount] = useLocalStorage('account', {user: 'nobody'})

console.log(account.user)

setAccount({
    ...account,
    user: 'Bar'
})

useViewport

监听 window 宽和高

index.jsx

<ViewportProvider>
    <App />
</ViewportProvider>

App.jsx

const App = () => {
    const { width, height } = useViewport()
    // now we get width and height of the view port in realtime
}

useWindow

监听窗口的属性

• visiable 网页 Tab 是否为可见

例子

const { visiable } = useWindow()