@zohodesk/fullscreen in react

A React component that sets it fullscreen using the Fullscreen Component.

Usage

Install

npm install @zohodesk/fullscreen

Import component

import Fullscreen from '@zohodesk/fullscreen';

Example

import React, { useState } from 'react';
import Fullscreen from '@zohodesk/fullscreen';
function Example() {
  const [isEnabled, setIsEnabled] = useState(false);
  return (
    <Fullscreen isEnabled={isEnabled} onChange={setIsEnabled}>
      <button
        onClick={() => {
          setIsEnabled(true);
        }}
      >
        Go Fullscreen
      </button>
    </Fullscreen>
  );
}
export default Example;

CSS

Class fullscreenEnabled will be added to component when it goes fullscreen.

.myComponent {
  color: #fff;
}

.myComponent .fullscreenEnabled {
  color: #000;
}

Fullscreen Props

//If true,  The fullscreen will be enabled
isEnabled : ?boolean = false,

//Will be added the fullscreen div element
className : ? (Object | String)

//Calls when fullscreen change
onChange : ?function

Version Changes

0.0.1

• Fullscreen basic functionality changes implemented.

0.1.0, 0.1.1

• Test release

0.1.2, 0.1.3

• Document changes

0.1.4

• Fixed css issue.

0.1.5

• Fixed render issue.

UPCOMING

• Set children to fullscreen