redux-windowsize

A simple redux reducer and selectors for window size.

Usage no npm install needed!

<script type="module">
  import reduxWindowsize from 'https://cdn.skypack.dev/redux-windowsize';
</script>

README

redux-windowsize

Install

$ npm i --save redux-windowsize

Usage

import windowSize, { createRemAction, createSizeAction, listenResize, REDUCER_KEY } from 'redux-windowsize'
const reducers = {
  [REDUCER_KEY], windowSize,
}
const reducer = combineReducers(reducerIndex)
const store = createStore(reducer)
// Update redux with current size.
store.dispatch(createSizeAction(window))
store.dispatch(createRemAction(window))
// Dispatch an action every 100ms when window size changes.
listenResize(store, window, 100)

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 to parseFloat.
  • 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. Attaches resize eventListener to window. Will dispatch one of setSize, setWidth, setHeight.
  • createSizeAction(window) - Get dimensions from window object and dispatch action.
  • listenSize(dispatch, window, waitMs) - Similar to listenResize but always dispatches setSize. 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 a setRem 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.windowSize
  • getWindowHeight - Get current height.
  • getWindowHeightMax - Get max height.
  • getWindowWidth - Get current width.
  • getWindowWidthMax - Get max width.
  • getHeightWidth - Get height and width as an object. Uses reselect to memoize returned obj.
  • getHeightWidthMax - Get height, width and max values. Uses reselect to memoize returned obj.