use-start-view-transition/dist/cjs/index.js

A set of hooks to use `document.startViewTransition` upon state/value changes

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    startViewTransition: ()=>startViewTransition,
    useStartViewTransitionWrap: ()=>useStartViewTransitionWrap,
    useStartViewTransitionValue: ()=>useStartViewTransitionValue,
    useStartViewTransitionState: ()=>useStartViewTransitionState
});
const _react = require("react");
const startViewTransition = async (fn)=>{
    if (typeof window === 'undefined' || !('startViewTransition' in document)) {
        fn();
    } else {
        let readyPromise;
        try {
            readyPromise = document.startViewTransition(fn).ready;
        } catch  {}
        return readyPromise;
    }
};
const useStartViewTransitionWrap = ([value, _setState], options = {})=>{
    const optionsRef = (0, _react.useRef)(options);
    optionsRef.current = options;
    const setState = (0, _react.useCallback)(async (v)=>{
        const { skipTransition  } = optionsRef.current;
        const skipFn = typeof skipTransition === 'function' ? skipTransition : (v)=>skipTransition;
        if (!skipFn(value)) {
            return startViewTransition(()=>_setState(v));
        }
        _setState(v);
    }, [
        _setState,
        value
    ]);
    return [
        value,
        setState
    ];
};
const useStartViewTransitionValue = (_value, options = {})=>{
    const valueRef = (0, _react.useRef)(_value);
    const [value, setValue] = useStartViewTransitionWrap((0, _react.useState)(_value), options);
    const { skipTransition  } = options;
    const skipFn = typeof skipTransition === 'function' ? skipTransition : (v)=>skipTransition;
    const shouldSkip = skipFn(_value);
    if (_value !== valueRef.current) {
        valueRef.current = _value;
        setValue(_value);
    }
    return shouldSkip ? _value : value;
};
const useStartViewTransitionState = (state, options = {})=>{
    return useStartViewTransitionWrap((0, _react.useState)(state), options);
};