react-full-screen/dist/index.modern.js

Component and Hook for handling full screen components

import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import fscreen from 'fscreen';

function useFullScreenHandle() {
  var _useState = useState(false),
      active = _useState[0],
      setActive = _useState[1];

  var node = useRef(null);
  useEffect(function () {
    var handleChange = function handleChange() {
      setActive(fscreen.fullscreenElement === node.current);
    };

    fscreen.addEventListener('fullscreenchange', handleChange);
    return function () {
      return fscreen.removeEventListener('fullscreenchange', handleChange);
    };
  }, []);
  var enter = useCallback(function () {
    if (fscreen.fullscreenElement) {
      return fscreen.exitFullscreen().then(function () {
        return fscreen.requestFullscreen(node.current);
      });
    } else if (node.current) {
      return fscreen.requestFullscreen(node.current);
    }
  }, []);
  var exit = useCallback(function () {
    if (fscreen.fullscreenElement === node.current) {
      return fscreen.exitFullscreen();
    }

    return Promise.resolve();
  }, []);
  return useMemo(function () {
    return {
      active: active,
      enter: enter,
      exit: exit,
      node: node
    };
  }, [active, enter, exit]);
}
var FullScreen = function FullScreen(_ref) {
  var handle = _ref.handle,
      onChange = _ref.onChange,
      children = _ref.children,
      className = _ref.className;
  var classNames = [];

  if (className) {
    classNames.push(className);
  }

  classNames.push('fullscreen');

  if (handle.active) {
    classNames.push('fullscreen-enabled');
  }

  useEffect(function () {
    if (onChange) {
      onChange(handle.active, handle);
    }
  }, [handle.active]);
  return React.createElement("div", {
    className: classNames.join(' '),
    ref: handle.node,
    style: handle.active ? {
      height: '100%',
      width: '100%'
    } : undefined
  }, children);
};

export { FullScreen, useFullScreenHandle };
//# sourceMappingURL=index.modern.js.map