react-easyfullscreen

React FullScreen

• • • • •

Component that performs fullscreen in DOM Elements

Installation

npm i react-easyfullscreen
// OR
yarn add react-easyfullscreen

Demo Link

Local demo:

git clone https://github.com/andrelmlins/react-fullscreen.git
cd react-fullscreen/example
yarn install && yarn start

Examples

import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import ReactFullscreeen from 'react-easyfullscreen';

class App extends PureComponent {
  render() {
    return (
      <div>
        <ReactFullscreen>
          {({ ref, onRequest, onExit }) => {
            return (
              <div
                ref={ref}
                style={{ backgroundColor: 'red', width: 120, height: 120 }}
              >
                <button onClick={() => onRequest()}>FullScreen</button>
                <button onClick={() => onExit()}>Screen</button>
              </div>
            );
          }}
        </ReactFullscreen>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Properties

Raw component props (before transform):

Prop	Type	Description
onChange	func	Call in change
onError	func	Call in error