react-css-transition-hook/dist/useTransition.cjs.js

Minimal, zero-dependency React hook to CSS class name based transitions.

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
var __export = (target, all) => {
  __markAsModule(target);
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __reExport = (target, module2, desc) => {
  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
    for (let key of __getOwnPropNames(module2))
      if (!__hasOwnProp.call(target, key) && key !== "default")
        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
  }
  return target;
};
var __toModule = (module2) => {
  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
};

// src/useTransition.ts
__export(exports, {
  useTransition: () => useTransition
});
var import_react = __toModule(require("react"));
function useTransition(desiredState, opts) {
  const [currentState, setCurrentState] = (0, import_react.useState)(Boolean(desiredState && opts.disableInitialEnterTransition));
  const [transition, setTransition] = (0, import_react.useState)(() => desiredState ? "entered" : null);
  (0, import_react.useEffect)(() => {
    if (!currentState && desiredState) {
      setCurrentState(true);
      setTransition("entering");
      runAfterFramePaint(() => setTransition("entered"));
    } else if (currentState && !desiredState) {
      setTransition("exiting");
      runAfterFramePaint(() => setTransition("exited"));
    }
  }, [currentState, desiredState]);
  const onTransitionEnd = (0, import_react.useCallback)(() => {
    if (!desiredState) {
      setCurrentState(false);
      setTransition(null);
    }
  }, [desiredState]);
  return [
    currentState,
    { className: transition ? opts[transition] ?? "" : "", onTransitionEnd },
    transition
  ];
}
function runAfterFramePaint(callback) {
  requestAnimationFrame(() => {
    const messageChannel = new MessageChannel();
    messageChannel.port1.onmessage = callback;
    messageChannel.port2.postMessage(void 0);
  });
}
//# sourceMappingURL=useTransition.cjs.js.map