rfc

react-fullscreen-crossbrowser

A simple react full-screen component, which will work in both, JS and TS environment.

Showing:

Popularity

Downloads/wk

736

GitHub Stars

19

Maintenance

Last Commit

7mos ago

Contributors

6

Package

Dependencies

0

Size (min+gzip)

0.9KB

License

ISC

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

npm version

react-fullscreen-crossbrowser

A React component that sets its children to full screen using the Fullscreen API, normalized using fscreen.

Disclosure

This package is a combination of two packages downloaded and converted to typescript
all credits due:
https://www.npmjs.com/package/react-full-screen
https://www.npmjs.com/package/fscreen

Usage similar to the original author but will work in typescript too

  • Install.
yarn add react-fullscreen-crossbrowser
  • Require component.
import Fullscreen from 'react-full-screen';
  • Setup and render.
import React, { Component } from "react";
import Fullscreen from 'react-fullscreen-crossbrowser';

class App extends Component {
  constructor(props) {
    this.state = {
      isFullscreenEnabled: false,
    };
  }

  render() {
    return (
      <div className="App">
        <button onClick={() => this.setState({isFullscreenEnabled: true})}>
          Go Fullscreen
        </button>

        <Fullscreen
          enabled={this.state.isFullscreenEnabled}
          onChange={isFullscreenEnabled => this.setState({isFullscreenEnabled})}
        >
          <div className='full-screenable-node'>
            Hi! This may cover the entire monitor.
          </div>
        </Fullscreen>
      </div>
    );
  }
}

export default App;

or typescript:

import * as React from 'react';
import FullScreen from 'react-fullscreen-crossbrowser';


export class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      isFullscreenEnabled: false,
    };
  }

  render() {
    return (
        <div>
          <button onClick={() => this.setState({isFullscreenEnabled: true})}>
            Go Fullscreen
          </button>
          <FullScreen
            enabled={this.state.isFullscreenEnabled}
            onChange={(isFullscreenEnabled: any) => this.setState({isFullscreenEnabled})}
          >
            <div className='full-screenable-node'>
              Hi! This may cover the entire monitor.
            </div>
          </FullScreen>
        </div>
    );
  }
}

The reason for keeping track of the current state outside of the component is that the user can choose to leave full screen mode without the action of your application. This is a safety feature of the Fullscreen API. In order to enter full screen again, the enabled prop needs to be flipped.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100