useFullscreen

import { useFullscreenElement } from '@kuzenbo/hooks';

function VideoPlayer() {
  const { ref, toggle, fullscreen } = useFullscreenElement<HTMLVideoElement>();

  return (
    <div>
      <video ref={ref} src="video.mp4" controls />
      <button onClick={toggle}>
        {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
      </button>
    </div>
  );
}

import { useFullscreenDocument } from '@kuzenbo/hooks';

function App() {
  const { toggle, fullscreen } = useFullscreenDocument();

  return (
    <div>
      <button onClick={toggle}>
        {fullscreen ? 'Exit Fullscreen' : 'Fullscreen Page'}
      </button>
      <p>Fullscreen: {fullscreen ? 'Yes' : 'No'}</p>
    </div>
  );
}

import { useFullscreenElement } from '@kuzenbo/hooks';

function ImageGallery() {
  const { ref, toggle, fullscreen } = useFullscreenElement<HTMLDivElement>();

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <img src="image1.jpg" alt="Gallery" />
      <img src="image2.jpg" alt="Gallery" />
      <button
        onClick={toggle}
        style={{
          position: 'absolute',
          top: 10,
          right: 10,
        }}
      >
        {fullscreen ? '⬅️ Exit' : '⤢ Fullscreen'}
      </button>
    </div>
  );
}

import { useFullscreenDocument } from '@kuzenbo/hooks';
import { useState } from 'react';

function Presentation() {
  const { toggle, fullscreen } = useFullscreenDocument();
  const [slide, setSlide] = useState(0);

  const startPresentation = async () => {
    await toggle();
    setSlide(0);
  };

  return (
    <div>
      {!fullscreen ? (
        <button onClick={startPresentation}>Start Presentation</button>
      ) : (
        <div>
          <h1>Slide {slide + 1}</h1>
          <button onClick={() => setSlide(s => s + 1)}>Next</button>
          <button onClick={toggle}>Exit</button>
        </div>
      )}
    </div>
  );
}

import { useFullscreenElement } from '@kuzenbo/hooks';

function MediaViewer() {
  const { ref, toggle, fullscreen } = useFullscreenElement();

  return (
    <div ref={ref}>
      <img src="photo.jpg" alt="Media" />
      {fullscreen && (
        <div className="fullscreen-controls">
          <button onClick={toggle}>Close</button>
          <button>Share</button>
          <button>Download</button>
        </div>
      )}
      {!fullscreen && (
        <button onClick={toggle}>View Fullscreen</button>
      )}
    </div>
  );
}

import { useFullscreenDocument } from '@kuzenbo/hooks';

function FullscreenButton() {
  const { toggle, fullscreen } = useFullscreenDocument();

  // Works across all browsers with fullscreen support
  return <button onClick={toggle}>Toggle Fullscreen</button>;
}