use-background-image/dist/use-background-image.esm.js

useBackgroundImage: for loading background images with just one tiny hook!

import { useReducer, useEffect } from 'react';

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

var reducer = function reducer(state, action) {
  switch (action.type) {
    case 'isLoading':
      return _extends({}, state, {
        src: action.src,
        isLoading: true,
        hasError: false
      });

    case 'ERROR':
      return _extends({}, state, {
        src: action.src,
        isLoading: false,
        hasError: true
      });

    default:
      return state;
  }
};

var spacer = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';

var initialState = function initialState(placeholder) {
  return {
    isLoading: false,
    hasError: false,
    src: placeholder
  };
};

function useBackgroundImage(_ref) {
  var src = _ref.src,
      _ref$placeholder = _ref.placeholder,
      placeholder = _ref$placeholder === void 0 ? spacer : _ref$placeholder;

  var _React$useReducer = useReducer(reducer, initialState(placeholder)),
      state = _React$useReducer[0],
      dispatch = _React$useReducer[1];

  useEffect(function () {
    var image = new Image();

    image.onload = function () {
      return dispatch({
        type: 'isLoading',
        src: src
      });
    };

    image.onerror = function () {
      return dispatch({
        type: 'ERROR',
        src: placeholder
      });
    };

    image.src = src;
    return function () {
      image.onerror = function () {
        return null;
      };

      image.onload = function () {
        return null;
      }; // @ts-ignore


      image = null;
    };
  }, [src]);
  return state;
}

export { useBackgroundImage };
//# sourceMappingURL=use-background-image.esm.js.map