@matt-dunn/react-wireframes/lib/useScrollElementIntoView.js

React component to annotate your components — useful for prototypes and proof of concepts

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useScrollElementIntoView = useScrollElementIntoView;

var _react = require("react");

var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function useScrollElementIntoView(_ref) {
  var element = _ref.element,
      boundary = _ref.boundary,
      onScrollIntoView = _ref.onScrollIntoView;
  (0, _react.useEffect)(function () {
    /* istanbul ignore else */
    if (element && boundary) {
      (0, _scrollIntoViewIfNeeded.default)(element, {
        behavior: "smooth",
        block: "start",
        scrollMode: "if-needed",
        boundary: boundary
      });
      /* istanbul ignore else */

      if (onScrollIntoView) {
        onScrollIntoView(element);
      }
    }
  }, [element, onScrollIntoView, boundary]);
}