@anton.bobrov/react-vevet-hooks/lib/cjs/hooks/useOnViewportOritentationChange.js

A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useOnViewportOritentationChange = void 0;
var react_hooks_1 = require("@anton.bobrov/react-hooks");
var react_1 = require("react");
var vevet_1 = require("vevet");
/**
 * Custom React hook that listens for changes in the viewport orientation.
 *
 * @example
 * const MyComponent = () => {
 *   useOnViewportOrientationChange(() => {
 *     console.log('Viewport orientation changed!');
 *   });
 *
 *   return <div>Change the orientation of the viewport to see the effect!</div>;
 * };
 */
function useOnViewportOritentationChange(effectProp) {
    var effect = (0, react_hooks_1.useEvent)(effectProp);
    var getOrientation = (0, react_hooks_1.useEvent)(function () {
        if (vevet_1.vevet.viewport.isLandscape) {
            return 'landscape';
        }
        if (vevet_1.vevet.viewport.isPortrait) {
            return 'portrait';
        }
        return 'rect';
    });
    (0, react_1.useEffect)(function () {
        var prevOrientation = getOrientation();
        var callback = vevet_1.vevet.viewport.callbacks.add('any', function () {
            var newOrientation = getOrientation();
            if (prevOrientation !== newOrientation) {
                effect();
                prevOrientation = newOrientation;
            }
        });
        return function () { return callback.remove(); };
    }, [effect, getOrientation]);
}
exports.useOnViewportOritentationChange = useOnViewportOritentationChange;