@anton.bobrov/react-vevet-hooks
Version:
A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library
34 lines • 1.45 kB
JavaScript
import { useEffect } from 'react';
import { vevet } from '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>;
* };
*/
export function useOnResize(effect, deps, settings) {
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.isMobile ? 'width' : target;
var viewportCallback = 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);
}
//# sourceMappingURL=useOnResize.js.map