Skip to main content

Window Values

The kea-window-values plugin lets you sync window.whatever with values.anything.

Values are synced on window scroll and resize events.

Installation#

import { windowValuesPlugin } from 'kea-window-values'
resetContext({
plugins: [windowValuesPlugin({ window: window })],
})

Usage#

const logic = kea({
windowValues: {
isSmallScreen: (window) => window.innerWidth < 640,
isRetina: (window) => window.devicePixelRatio > 2,
scrollBarWidth: (window) => window.innerWidth - window.body.clientWidth,
},
})
// later in your app
if (logic.values.isSmallScreen) {
console.log('Screen width under 640px')
}