├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── package.json ├── scripts └── install_on ├── src ├── __tests__ │ └── index_tests.js └── index.js └── test-setup.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 2, 3 | "optional": [] 4 | } 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "rules": { 4 | "indent": [ 5 | 2, 6 | 2 7 | ], 8 | "quotes": [ 9 | 2, 10 | "single" 11 | ], 12 | "linebreak-style": [ 13 | 2, 14 | "unix" 15 | ], 16 | "semi": [ 17 | 2, 18 | "always" 19 | ], 20 | "react/jsx-boolean-value": 1, 21 | "react/jsx-quotes": 1, 22 | "react/jsx-no-undef": 1, 23 | "react/jsx-uses-react": 1, 24 | "react/jsx-uses-vars": 1, 25 | "react/no-did-mount-set-state": 1, 26 | "react/no-did-update-set-state": 1, 27 | "react/no-multi-comp": 1, 28 | "react/no-unknown-property": 1, 29 | "react/prop-types": 1, 30 | "react/react-in-jsx-scope": 1, 31 | "react/self-closing-comp": 1, 32 | "react/wrap-multilines": 1 33 | }, 34 | "env": { 35 | "es6": true, 36 | "node": true, 37 | "browser": true 38 | }, 39 | "ecmaFeatures": { 40 | "jsx": true, 41 | "modules": true, 42 | "spread": true, 43 | "restParams": true 44 | }, 45 | "plugins": [ 46 | "react" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | dist/ 29 | npm-shrinkwrap.json 30 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | scripts/ 3 | .* 4 | test-setup.js 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - iojs 5 | - '0.12' 6 | - '0.10' 7 | notifications: 8 | email: 9 | on_success: never 10 | on_failure: always 11 | deploy: 12 | provider: npm 13 | email: npm@thomwright.co.uk 14 | api_key: 15 | secure: UyoR97s1ZoaQJO2Q1qp8oYVZJKUpC4wSXvsHkgW1LBnq2JuGZmtro9Q1GWKs64Hvw1R6syYt9rhW0ta/34i7S+NHDLoknmMcyglfCD8sE0eSM1sPmxMv+XZwJ/5cq6MV0VgBoesq/+z39ijOTO/sJxhkREIlJ5MHGxQngKZilvsDcQKirb5LtzodrPnGX8IvUaMdlX8fF3ZP5xPkFZGEacyV2GMeTokiCesJ7MNuMNTfRgGJd3TgawVIBd8XIzos98RzlJKloDFlHrvtpa8P5Eim/okQQuk8fNpKtpySEHasSnKlpvQpVzXNv5zpw3NWWgXs3OpESmPFPOsMh6IrB6OwYNlq9sP6zxych6HSxY94B7sAhYAO2OQoP9vcVyqRTT+JV8C7nEfTW8eKCCZPWnfKIKORLNRxyLO5skVt8KwEWZCeQqX7odm+TYHHinWlD1fYlne7VIRY5uUEZSMOVXojE1No9i/7HVsYT6gL5NfFKYrBs4y/w4JV0WVZKvJYupu4H1Z/dQ+tbX4ximXiEkPO/idrvzRTxClzQ5d8xNjTKNwVxmxWFEVwn9kC3LP7aUyokONoh1cjGqE99W8h8g/FjHVT6H/Qti8hAjsZHtqc1E4Qem4d7/rIEtpYBro9h84sd0fDbneuX2jdyZf/G+C4T6mtB86gRC33USQfzhY= 16 | on: 17 | tags: true 18 | repo: ThomWright/react-fullscreen 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Thom Wright 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-fullscreen 2 | [![Build Status](https://snap-ci.com/ThomWright/react-fullscreen/branch/master/build_image)](https://snap-ci.com/ThomWright/react-fullscreen/branch/master) 3 | [![npm](https://img.shields.io/npm/v/react-fullscreen.svg?style=flat-square)](https://www.npmjs.com/package/react-fullscreen) 4 | [![David](https://img.shields.io/david/ThomWright/react-fullscreen.svg?style=flat-square)](https://david-dm.org/ThomWright/react-fullscreen) 5 | [![David](https://img.shields.io/david/dev/ThomWright/react-fullscreen.svg?style=flat-square)](https://david-dm.org/ThomWright/react-fullscreen#info=devDependencies) 6 | 7 | React component that fullscreens a child component. Responds to browser resizes. 8 | 9 | ## Example 10 | 11 | ```javascript 12 | import FullScreen from 'react-fullscreen'; 13 | import MyChildComponent from './MyChildComponent'; 14 | 15 | const rootInstance = React.render( 16 | 17 | 18 | , 19 | document.getElementById('someID') 20 | ); 21 | ``` 22 | 23 | ```javascript 24 | import React from 'react'; 25 | 26 | export default class MyChildComponent extends React.Component { 27 | render() { 28 | return ; 32 | } 33 | } 34 | 35 | MyChildComponent.propTypes = { 36 | width: React.PropTypes.number, 37 | height: React.PropTypes.number 38 | }; 39 | ``` 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-fullscreen", 3 | "version": "0.1.0", 4 | "description": "React component that fullscreens a child component. Responds to browser resizes.", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "build": "rimraf dist && babel src --out-dir dist --ignore \"__tests__\"", 8 | "lint": "eslint src/", 9 | "mocha": "mocha **/*__tests__/* -R spec --require test-setup", 10 | "test": "npm run lint && npm run mocha", 11 | "prepublish": "npm test && npm run build && npm shrinkwrap", 12 | "postpublish": "rm npm-shrinkwrap.json" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/ThomWright/react-fullscreen" 17 | }, 18 | "keywords": [ 19 | "react", 20 | "full", 21 | "screen", 22 | "fullscreen", 23 | "full-screen", 24 | "maximise", 25 | "react-component" 26 | ], 27 | "author": "Thom Wright (http://thomwright.co.uk/)", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/ThomWright/react-fullscreen/issues" 31 | }, 32 | "homepage": "https://github.com/ThomWright/react-fullscreen", 33 | "dependencies": {}, 34 | "devDependencies": { 35 | "babel": "^5.4.7", 36 | "babel-eslint": "^3.1.9", 37 | "chai": "^3", 38 | "eslint": "^0", 39 | "eslint-plugin-react": "^2.2.0", 40 | "mocha": "^2.2.5", 41 | "react": "^0.13.0 || ^0.14.0-a", 42 | "rimraf": "^2.3.4" 43 | }, 44 | "peerDependencies": { 45 | "react": "^0.13.0 || ^0.14.0-a" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scripts/install_on: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | nvm install $1 2>/dev/null 4 | nvm use $1 5 | npm install 6 | -------------------------------------------------------------------------------- /src/__tests__/index_tests.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThomWright/react-fullscreen/54bedcc3bb1308c93d48b0209583d3c058c2632e/src/__tests__/index_tests.js -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | var getDimensions = () => ({ 4 | width: window.innerWidth, 5 | height: window.innerHeight 6 | }); 7 | 8 | export default class FullScreen extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | this.state = getDimensions(); 12 | 13 | this.handleResize = this.handleResize.bind(this); 14 | } 15 | 16 | handleResize() { 17 | this.setState(getDimensions()); 18 | } 19 | 20 | componentDidMount() { 21 | window.addEventListener('resize', this.handleResize); 22 | } 23 | 24 | componentWillUnmount() { 25 | window.removeEventListener('resize', this.handleResize); 26 | } 27 | 28 | render() { 29 | const child = React.cloneElement(React.Children.only(this.props.children), 30 | { 31 | width: this.state.width, 32 | height: this.state.height 33 | } 34 | ); 35 | return child; 36 | } 37 | 38 | } 39 | -------------------------------------------------------------------------------- /test-setup.js: -------------------------------------------------------------------------------- 1 | var chai = require('chai'); 2 | global.expect = chai.expect; 3 | 4 | chai.config.includeStack = true; 5 | 6 | require('babel/register')({ 7 | optional: [] 8 | }); 9 | --------------------------------------------------------------------------------