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
npm install && npm run start

Examples

import React from 'react';
import { render } from 'react-dom';
import ReactFullscreen from 'react-easyfullscreen';

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

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

Properties

Raw component props (before transform):

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

Children Function Properties

| Prop | Type | Description | | --------- | ------ | --------------------------- | | ref | object | Ref dom element | | isEnabled | bool | If it's possible fullscreen | | onToggle | func | Call for fullscreen toggle | | onExit | func | Call for fullscreen exit | | onRequest | func | Call for fullscreen enter |

Browsers Support

You can see the list of supported browsers here

NPM Statistics

Download stats for this NPM package

License

React FullScreen is open source software licensed as MIT.