Use Fullscreen

use-fullscreen allows to enter/exit fullscreen

Usage

Code Editor
Copy
import { useFullscreen } from '@erudilabs/alma'

Default

const { toggle, fullscreen } = useFullscreen()
Code Editor
Copy
<Button onClick={toggle} theme={fullscreen ? 'danger' : 'primary'}>
  {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
</Button>

Custom ref

Unsplash Image to make Fullscreen 
const { ref, toggle } = useFullscreen()
Code Editor
Copy
<Fragment>
  <Image
    ref={ref}
    src="your-path-image"
    alt="Unsplash Image to make Fullscreen"
    width={800}
    height={600}
  />
  <Button
    onClick={toggle}
    theme={fullscreen ? 'danger' : 'primary'}
    className="mt-4"
  >
    View Image Fullscreen
  </Button>
</Fragment>

Definition

Code Editor
Copy
function useFullscreen<T extends HTMLElement = any>(): {
  readonly ref: (element: T | null) => void;
  readonly toggle: () => Promise<void>;
  readonly fullscreen: boolean;
};