@dotcms/react/lib/next/hooks/useIsDevMode.esm.js

Official React Components library to render a dotCMS page.

import { useContext, useState, useEffect } from 'react';
import { UVE_MODE } from '@dotcms/types';
import { getUVEState } from '@dotcms/uve';
import { DEVELOPMENT_MODE } from '@dotcms/uve/internal';
import { DotCMSPageContext } from '../contexts/DotCMSPageContext.esm.js';

/**
 * @internal
 * A React hook that determines if the current environment is in development mode.
 *
 * The hook returns `true` if either:
 *   - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
 *
 * @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
 */
const useIsDevMode = () => {
  const {
    mode
  } = useContext(DotCMSPageContext);
  const [isDevMode, setIsDevMode] = useState(mode === 'development');
  useEffect(() => {
    var _getUVEState;
    // Inside UVE we rely on the UVE state to determine if we are in development mode
    if ((_getUVEState = getUVEState()) != null && _getUVEState.mode) {
      var _getUVEState2;
      const isUVEInEditor = ((_getUVEState2 = getUVEState()) == null ? void 0 : _getUVEState2.mode) === UVE_MODE.EDIT;
      setIsDevMode(isUVEInEditor);
      return;
    }
    setIsDevMode(mode === DEVELOPMENT_MODE);
  }, [mode]);
  return isDevMode;
};

export { useIsDevMode };