Nightly Procrastination Machine

    redux-windowsize

    1.3.1 • Public • Published

    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.

    Keywords

    none

    Install

    npm i redux-windowsize

    DownloadsWeekly Downloads

    100

    Version

    1.3.1

    License

    ISC

    Last publish

    Collaborators

    • kaicurry