https://github.com/andrelmlins/react-fullscreen

Component that performs fullscreen in DOM Elements
https://github.com/andrelmlins/react-fullscreen

easyfullscreen fullscreen react screenfull

Last synced: 5 months ago
JSON representation

Component that performs fullscreen in DOM Elements

• Host: GitHub
• URL: https://github.com/andrelmlins/react-fullscreen
• Owner: andrelmlins
• License: mit
• Created: 2019-07-04T22:27:52.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T21:25:02.000Z (about 3 years ago)
• Last Synced: 2025-06-18T16:17:01.822Z (6 months ago)
• Topics: easyfullscreen, fullscreen, react, screenfull
• Language: JavaScript
• Homepage: https://react-fullscreen.netlify.com/
• Size: 2.42 MB
• Stars: 28
• Watchers: 2
• Forks: 7
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React FullScreen

[![npm version](https://badge.fury.io/js/react-easyfullscreen.svg)](https://www.npmjs.com/package/react-easyfullscreen) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/react-fullscreen/blob/master/LICENSE) • [![Node.js CI](https://github.com/andrelmlins/react-fullscreen/actions/workflows/nodejs.yml/badge.svg)](https://github.com/andrelmlins/react-fullscreen/actions/workflows/nodejs.yml) • [![Netlify Status](https://api.netlify.com/api/v1/badges/79ceb0f2-f703-4092-92aa-64d441c2e9c7/deploy-status)](https://app.netlify.com/sites/react-fullscreen/deploys) • [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/andrelmlins/react-fullscreen.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/andrelmlins/react-fullscreen/context:javascript)

Component that performs fullscreen in DOM Elements

## Installation

```

npm i react-easyfullscreen

// OR

yarn add react-easyfullscreen

```

## Demo [Link](https://react-fullscreen.netlify.com/)

Local demo:

```

git clone https://github.com/andrelmlins/react-fullscreen.git

cd react-fullscreen

npm install && npm run start

```

## Examples

```jsx

import React from 'react';

import { render } from 'react-dom';

import ReactFullscreen from 'react-easyfullscreen';

const App = () => (

  

    {({ ref, onRequest, onExit }) => (

      


         onRequest()}>FullScreen

         onExit()}>Screen

      

    )}

  

);


render(, 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](https://caniuse.com/fullscreen)

![Browsers support](assets/browser-support.png)

## NPM Statistics

Download stats for this NPM package

[![NPM](https://nodei.co/npm/react-easyfullscreen.png)](https://nodei.co/npm/react-easyfullscreen/)

## License

React FullScreen is open source software [licensed as MIT](https://github.com/andrelmlins/react-fullscreen/blob/master/LICENSE).