├── .gitignore
├── test-setup.js
├── .travis.yml
├── index.d.ts
├── index.js.flow
├── example.js
├── example.html
├── test.js
├── index.js
├── README.md
├── package.json
└── LICENSE
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | dist
4 | .cache
5 |
--------------------------------------------------------------------------------
/test-setup.js:
--------------------------------------------------------------------------------
1 | require('raf/polyfill');
2 | require('browser-env')();
3 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | git:
2 | depth: 1
3 | sudo: false
4 | language: node_js
5 | node_js:
6 | - '8'
7 | cache:
8 | yarn: true
9 | directories:
10 | - node_modules
11 | script:
12 | - yarn test
13 |
--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | interface WindowSize {
2 | innerHeight: number,
3 | innerWidth: number,
4 | outerHeight: number,
5 | outerWidth: number,
6 | }
7 |
8 | export default function useWindowSize(): WindowSize;
9 |
--------------------------------------------------------------------------------
/index.js.flow:
--------------------------------------------------------------------------------
1 | interface WindowSize {
2 | innerHeight: number,
3 | innerWidth: number,
4 | outerHeight: number,
5 | outerWidth: number,
6 | }
7 |
8 | declare export default function useWindowSize(): WindowSize;
9 |
--------------------------------------------------------------------------------
/example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import useWindowWidth from './';
4 |
5 | function App() {
6 | let windowWidth = useWindowWidth();
7 | return {JSON.stringify(windowWidth)};
8 | }
9 |
10 | render(, window.root);
11 |
--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Example
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | let test = require('ava');
3 | let { createElement: h } = require('react');
4 | let ReactTestRenderer = require('react-test-renderer');
5 | let useWindowSize = require('./');
6 |
7 | function render(val) {
8 | return ReactTestRenderer.create(val).toJSON();
9 | }
10 |
11 | test(t => {
12 | function Component() {
13 | return JSON.stringify(useWindowSize());
14 | }
15 |
16 | t.is(render(h(Component)), JSON.stringify({
17 | innerHeight: window.innerHeight,
18 | innerWidth: window.innerHeight,
19 | outerHeight: window.outerHeight,
20 | outerWidth: window.outerWidth,
21 | }));
22 | });
23 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | let { useState, useEffect } = require('react');
3 |
4 | function getSize() {
5 | return {
6 | innerHeight: window.innerHeight,
7 | innerWidth: window.innerWidth,
8 | outerHeight: window.outerHeight,
9 | outerWidth: window.outerWidth,
10 | };
11 | }
12 |
13 | function useWindowSize() {
14 | let [windowSize, setWindowSize] = useState(getSize());
15 |
16 | function handleResize() {
17 | setWindowSize(getSize());
18 | }
19 |
20 | useEffect(() => {
21 | window.addEventListener('resize', handleResize);
22 | return () => {
23 | window.removeEventListener('resize', handleResize);
24 | };
25 | }, []);
26 |
27 | return windowSize;
28 | }
29 |
30 | module.exports = useWindowSize;
31 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # `@rehooks/window-size`
2 |
3 | > React hook for subscribing to window size
4 |
5 | > **Note:** This is using the new [React Hooks API Proposal](https://reactjs.org/docs/hooks-intro.html)
6 | > which is subject to change until React 16.7 final.
7 | >
8 | > You'll need to install `react`, `react-dom`, etc at `^16.7.0-alpha.0`
9 |
10 | ## Install
11 |
12 | ```sh
13 | yarn add @rehooks/window-size
14 | ```
15 |
16 | ## Usage
17 |
18 | ```js
19 | import useWindowSize from '@rehooks/window-size';
20 |
21 | function MyComponent() {
22 | let windowSize = useWindowSize();
23 | // {
24 | // innerWidth: window.innerWidth,
25 | // innerHeight: window.innerHeight,
26 | // outerWidth: window.outerWidth,
27 | // outerHeight: window.outerHeight,
28 | // }
29 |
30 | // ...
31 | }
32 | ```
33 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@rehooks/window-size",
3 | "version": "1.0.2",
4 | "description": "React hook for subscribing to window size",
5 | "main": "index.js",
6 | "repository": "https://github.com/rehooks/window-size",
7 | "author": "Jamie Kyle ",
8 | "license": "MIT",
9 | "publishConfig": {
10 | "access": "public"
11 | },
12 | "keywords": [
13 | "react",
14 | "hooks",
15 | "window",
16 | "browser",
17 | "size"
18 | ],
19 | "files": [
20 | "index.*"
21 | ],
22 | "scripts": {
23 | "test": "ava test.js",
24 | "example": "parcel example.html"
25 | },
26 | "dependencies": {
27 | "react": "^16.7.0-alpha.0"
28 | },
29 | "devDependencies": {
30 | "ava": "^0.25.0",
31 | "browser-env": "^3.2.5",
32 | "parcel": "^1.10.3",
33 | "raf": "^3.4.0",
34 | "react-dom": "^16.7.0-alpha.0",
35 | "react-test-renderer": "^16.7.0-alpha.0"
36 | },
37 | "ava": {
38 | "require": [
39 | "./test-setup.js"
40 | ]
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2018-present James Kyle
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------