Función de pantalla completa con useFullScreen

Hook que permite añadir funcionalidad de pantalla completa a cualquier elemento de la interfaz gráfica. Haz clic sobre los botones para ver su funcionamiento.

Para su implementación basta con hacer el llamado al hook y pasar como parámetro el id del elemento en el DOM. Si ningún parámetro es pasado, usará por defecto el elemento body. El hook retorna la función que puede ser utilizada para abrir o cerrar el modo de pantalla completa al elemento indicado.

import React from 'react';
import { render } from 'react-dom';
import { useFullScreen } from 'unc-react-creator';

const App = () => {
  const [callFullScreen] = useFullScreen();

  return (
    <div className='row h-100 no-gutters'>
      <div className='col-6 background-color-blue'>
        <button onClick={callFullScreen}>Full Screen</button>
      </div>
    </div>
  );
};

render(
  <App />,
  document.getElementById('app')
);

Un ejemplo un poco más elaborado, pasando como parámetro el id del elemento del DOM:

import React from 'react';
import { render } from 'react-dom';
import { useFullScreen } from 'unc-react-creator';

import './assets/css/C01.styl';
import 'animate.css/animate.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  const [leftTopFullScreen] = useFullScreen('leftTop');
  const [rightTopFullScreen] = useFullScreen('rightTop');
  const [leftBottomFullScreen] = useFullScreen('leftBottom');
  const [rightBottomFullScreen] = useFullScreen('rightBottom');

  return (
    <div className='row h-100 no-gutters'>
      <div id='leftTop' className='col-6 background-color-blue'>
        <button onClick={leftTopFullScreen}>Full Screen Left-Top</button>
      </div>
      <div id='rightTop' className='col-6 background-color-lightblue'>
        <button onClick={rightTopFullScreen}>Full Screen Right-Top</button>
      </div>
      <div id='leftBottom' className='col-6 background-color-yellow'>
        <button onClick={leftBottomFullScreen}>Full Screen Left-Bottom</button>
      </div>
      <div id='rightBottom' className='col-6 background-color-gray'>
        <button onClick={rightBottomFullScreen}>Full Screen Right-Bottom</button>
      </div>
    </div>
  );
};

render(
  <App />,
  document.getElementById('app')
);