react-fullscreen-html

The React component allows its children to enter the browser's fullscreen viewing mode using the Fullscreen HTML5.

🎁 Features

• Compatible with both JavaScript and TypeScript
• Compatible with both Desktop and Mobile browsers
• Compatible with all browsers
• No dependency
• Easy to use

🔧 Install

react-fullscreen-html is available on npm. It can be installed with the following command:

npm install react-fullscreen-html --save

react-fullscreen-html is available on yarn as well. It can be installed with the following command:

yarn add react-fullscreen-html

💡 Usage

🎀 Basic

import React from 'react';
import { Fullscreen, useFullscreen } from "react-fullscreen-html";

function App() {
  const screen = useFullscreen();

  return (
    <div>
      <button onClick={screen.enter}>
        Enter fullscreen
      </button>

      <Fullscreen handle={screen}>
        Any fullscreen content here
      </Fullscreen>
    </div>
  );
}

export default App;

🎀 Advanced

import React, {useCallback} from 'react';
import { Fullscreen, useFullscreen } from "react-fullscreen-html";

function App() {
  const screen1 = useFullscreen();
  const screen2 = useFullscreen();

  const reportChange = useCallback((state, handle) => {
    if (handle === screen1) {
      console.log('Screen 1 went to', state, handle);
    }
    if (handle === screen2) {
      console.log('Screen 2 went to', state, handle);
    }
  }, [screen1, screen2]);
  
  return (
    <div>
      <button onClick={screen1.enter}>
        First
      </button>

      <button onClick={screen2.enter}>
        Second
      </button>

      <Fullscreen handle={screen1} onChange={reportChange}>
        <div className="full-screenable-node" style={{background: "red"}}>
          First
          <button onClick={screen1.exit}>
            Exit
          </button>
        </div>
      </Fullscreen>

      <Fullscreen handle={screen2} onChange={reportChange}>
        <div className="full-screenable-node" style={{background: "green"}}>
          Second
          <button onClick={screen2.exit}>
            Exit
          </button>
        </div>
      </Fullscreen>
    </div>
  );
};

export default App;

📚 Documentation

📖 useFullscreen

Returned	Type	Description
active	boolean	true if this element is currently full screen.
enter	() => void	Requests this element to go full screen.
exit	>() => void	Requests this element to exit full screen.

📖 Fullscreen

Prop	Type	Require	Description
handle	UseFullscreenProps	✔️	Handle that helps operate the full screen state.
onChange	(state: boolean, handle: FullscreenHandle) => void	❌	Optional callback that gets called when this screen changes state.

💖 Wrap Up

If you think any of the react-fullscreen-html can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to react-fullscreen-html by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

• Open pull request with improvements
• Discuss ideas in issues
• Spread the word
• Reach out with any feedback

⚖️ License

The MIT License