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

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

import { useEvent } from '@anton.bobrov/react-hooks';
import { useEffect } from 'react';
import { vevet } from '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>;
 * };
 */
export function useOnViewportOritentationChange(effectProp) {
    var effect = useEvent(effectProp);
    var getOrientation = useEvent(function () {
        if (vevet.viewport.isLandscape) {
            return 'landscape';
        }
        if (vevet.viewport.isPortrait) {
            return 'portrait';
        }
        return 'rect';
    });
    useEffect(function () {
        var prevOrientation = getOrientation();
        var callback = vevet.viewport.callbacks.add('any', function () {
            var newOrientation = getOrientation();
            if (prevOrientation !== newOrientation) {
                effect();
                prevOrientation = newOrientation;
            }
        });
        return function () { return callback.remove(); };
    }, [effect, getOrientation]);
}
//# sourceMappingURL=useOnViewportOritentationChange.js.map