Documentation

Getting Started

Hooks Overview

useFetch( )useCopyToClipboard( )useNetwork( )useFullScreen( )useGeolocation( )useSelectedText( )useStateCallback( )useResize( )useSearch( )useImageDownload( )

useFullScreen( )

A React hook that enables a HTMLElement or component to toggle into a fullscreen and/or exit fullscreen. This hooks provides the open, close and toggle methods which can be used to switch the screen from open to closed or viceversa.

Usage

1import { useRef } from 'react'
2import { useFullScreen } from 'react-modern-hooks'
3
4const Demo = () => {
5  const ref = useRef(null)
6  const { fullScreen, close, open, toggle, error } = useFullScreen(ref)
7
8  if (error) {
9    console.log('Error: ', error)
10  }
11
12  return (
13    <div>
14      <div ref={ref} style={{ background: '#fff' }}>
15        <h1> This is the div (one with ref) that will enter fullscreen mode</h1>
16        {fullScreen ? (
17          <p>Only visible in fullscreen mode</p>
18        ) : (
19          <p>Not in fullscreen mode</p>
20        )}
21
22        <button onClick={() => open()}>Open FullScreen</button>
23        <button onClick={() => close()}>Exit FullScreen</button>
24
25        <button onClick={() => toggle()}>Toggle Open/Exit FullScreen</button>
26      </div>
27    </div>
28  )
29}
30
31export default Demo

References

Input Variables

ref - A HTMLElement mutable ref object to toggle to fullscreen

onExit - An optional callback function to run when exiting fullscreen

Output Variables

fullScreen - A boolean value to show if fullscreen or not

open - A function to open the referenced component/element to fullscreen window

close - A function to close/exit the referenced component/element from fullscreen window

toggle - A function to both open and/or close/exit the referenced component/element to and from fullscreen window

error - An error message incase something doesn't go right on opening and/or closing fullscreen window