Add fullscreen button

[yordis]

I am not sure how to start the conversation around

Offer an option to the highly used and well-maintained components to move to the official organization: > mui-org/x on GitHub, @material-ui/x on npm and x.material-ui.com for the documentation.

Using Fullscreen and FullscreenExit combined with Fullscreen API is a common component to have in some back-office driven apps.

Actual code, copied from https://www.npmjs.com/package/@straw-hat/react-fullscreen (I am the author, feel free to send feedbacks, https://bundlephobia.com/result?p=@straw-hat/[email protected])

import * as React from 'react';
import IconButton from '@material-ui/core/IconButton';
import FullscreenIcon from '@material-ui/icons/Fullscreen';
import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';

import { useFullscreen } from '@straw-hat/react-fullscreen';
 
export const FullscreenButton: React.FC<{ target: HTMLElement | null }> = (props) => {
  const { isFullscreen, toggleFullscreen } = useFullscreen(props.target);
 
  return (
    <IconButton color="inherit" onClick={toggleFullscreen}>
      {isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
    </IconButton>
  );
};

Cheers,

[oliviertassinari]

@yordis Thanks for sharing and for #16880. It's great to have a minimum support level of full screen, even if it's not a frequent feature people ask for.