redux-windowsize
Install
$ npm i --save redux-windowsize
Usage
const reducers = REDUCER_KEY windowSizeconst reducer = const store = // Update redux with current size.storestore// Dispatch an action every 100ms when window size changes.
For a full, working example see http://redux-windowsize.cape.io and code https://github.com/cape-io/redux-windowsize-website
API
Reducer
The reducer is the default export. The following is the state managed by the reducer.
const defaultState = height: null // 100 after setHeight(100) or setSize(100, 200) or setSizeArr([100, 200]) heightMax: null // adjusted any time height changes. id: null // 'foo' after setId('foo') rem: null // 16 after setRem('16px') width: null // 200 after setWidth(200) or setSize(100, 200) or setSizeArr([100, 200]) widthMax: null // adjusted any time width changes.
Actions
setSize(height, width)
- Accepts numbers.setSizeArr([height, width])
- Same as above but accepts a single argument with height, width as an array.setHeight(height)
setWidth(width)
setRem('16px')
First argument sent toparseFloat
.reset()
- Brings reducer back to its defaultState.setId(any)
- If you want to define a single size related value. Maybe it's a string that is unique to a size range.
Utility
listenResize(store, window, waitMs, reducerPath)
- Dispatch an action every time window size changes. Attachesresize
eventListener to window. Will dispatch one ofsetSize
,setWidth
,setHeight
.createSizeAction(window)
- Get dimensions from window object and dispatch action.listenSize(dispatch, window, waitMs)
- Similar tolistenResize
but always dispatchessetSize
. Possibly faster since it doesn't check store state and compare values before the dispatch.listenHeight(dispatch, window, waitMs)
- If you only care about listening to height changes.listenWidth(dispatch, window, waitMs)
- If you only care about width changes.createRemAction(window)
Create asetRem
action based on result of the documentElement font size.
Selectors
All based off reducer being on reducer key REDUCER_KEY
.
REDUCER_KEY
: 'windowSize'getWindowSize(state)
returns state.windowSizegetWindowHeight
- Get current height.getWindowHeightMax
- Get max height.getWindowWidth
- Get current width.getWindowWidthMax
- Get max width.getHeightWidth
- Get height and width as an object. Usesreselect
to memoize returned obj.getHeightWidthMax
- Get height, width and max values. Usesreselect
to memoize returned obj.