@anton.bobrov/react-vevet-hooks
Version:
A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library
38 lines (37 loc) • 1.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useOnResize = void 0;
var react_1 = require("react");
var vevet_1 = require("vevet");
/**
* Custom React hook that listens for viewport resize events.
* The effect callback is called both on mount and resize.
*
* @example
* const MyComponent = () => {
* useOnResize(() => {
* console.log('Viewport resized!');
* }, []);
*
* return <div>Resize the viewport to see the effect!</div>;
* };
*/
function useOnResize(effect, deps, settings) {
(0, react_1.useEffect)(function () {
var _a, _b;
var destructor = effect();
var isMobileOptimizedTarget = (_a = settings === null || settings === void 0 ? void 0 : settings.isMobileOptimizedTarget) !== null && _a !== void 0 ? _a : true;
var target = (_b = settings === null || settings === void 0 ? void 0 : settings.target) !== null && _b !== void 0 ? _b : 'any';
target = isMobileOptimizedTarget && vevet_1.vevet.isMobile ? 'width' : target;
var viewportCallback = vevet_1.vevet.viewport.callbacks.add(target, function () {
destructor === null || destructor === void 0 ? void 0 : destructor();
destructor = effect();
}, settings);
return function () {
viewportCallback.remove();
destructor === null || destructor === void 0 ? void 0 : destructor();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
}
exports.useOnResize = useOnResize;