Skip to content

Commit 06d21d8

Browse files
fouadfouad
committed
init: repo
0 parents  commit 06d21d8

13 files changed

+6751
-0
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
*.log
3+
dist
4+
.cache

‎.travis.yml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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

‎LICENSE

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2018-present Fouad Matin <[email protected]>
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.

‎README.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# `@rehooks/component-size`
2+
3+
> React hook for determining the size of a component
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/component-size
14+
```
15+
16+
## Usage
17+
18+
```js
19+
import useComponentSize from '@rehooks/component-size'
20+
21+
function MyComponent() {
22+
let { ref, size } = useComponentSize()
23+
// size == { width: 100, height: 200 }
24+
let { width, height } = size
25+
let imgUrl = `https://via.placeholder.com/${width}x${height}`
26+
27+
return (
28+
<div style={{ width: '100%', height: '100%' }}>
29+
<img ref={ref} src={imgUrl} />
30+
</div>
31+
)
32+
}
33+
```

‎example.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Example</title>
9+
<style>
10+
html,
11+
body,
12+
#root {
13+
margin: 0;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<div id="root"></div>
22+
<script src="./example.js"></script>
23+
</body>
24+
25+
</html>

‎example.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import useComponentSize from './'
4+
5+
function App() {
6+
let { ref, size } = useComponentSize()
7+
let { width, height } = size
8+
let imgUrl = `https://via.placeholder.com/${width}x${height}`
9+
10+
return (
11+
<div style={{ width: '100%', height: '100%' }}>
12+
<pre>{JSON.stringify(size)}</pre>
13+
<div ref={ref} style={{ width: '50%', height: '50%' }}>
14+
<img src={imgUrl} width={width} height={height} />
15+
</div>
16+
</div>
17+
)
18+
}
19+
20+
render(<App />, window.root)

‎index.d.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
interface ComponentSize {
2+
width: number
3+
height: number
4+
}
5+
6+
interface ComponentSizeReturn {
7+
size: ComponentSize
8+
ref: any
9+
}
10+
11+
export default function useComponentSize(): ComponentSizeReturn

‎index.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use strict'
2+
let { useState, useLayoutEffect, useRef } = require('react')
3+
4+
function getSize(el) {
5+
return {
6+
width: el.offsetWidth,
7+
height: el.offsetHeight
8+
}
9+
}
10+
11+
function useComponentSize() {
12+
let ref = useRef(null)
13+
let [size, setComponentSize] = useState(getSize({}))
14+
15+
function handleResize() {
16+
if (ref && ref.current) {
17+
setComponentSize(getSize(ref.current))
18+
}
19+
}
20+
21+
useLayoutEffect(() => {
22+
handleResize()
23+
window.addEventListener('resize', handleResize)
24+
25+
return () => {
26+
window.removeEventListener('resize', handleResize)
27+
}
28+
}, [])
29+
30+
return { ref, size }
31+
}
32+
33+
module.exports = useComponentSize

‎index.js.flow

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
interface ComponentSize {
2+
width: number,
3+
height: number,
4+
}
5+
6+
interface ComponentSizeReturn {
7+
size: ComponentSize,
8+
ref: any,
9+
}
10+
11+
declare export default function useComponentSize(): ComponentSize;

‎package.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "@rehooks/component-size",
3+
"version": "1.0.0",
4+
"description": "React hook for component-size",
5+
"main": "index.js",
6+
"repository": "https://github.com/rehooks/component-size",
7+
"author": "Fouad Matin <open@[email protected]>",
8+
"license": "MIT",
9+
"publishConfig": {
10+
"access": "public"
11+
},
12+
"keywords": [
13+
"react",
14+
"hooks",
15+
"component-size"
16+
],
17+
"files": [
18+
"index.*"
19+
],
20+
"scripts": {
21+
"test": "ava test.js",
22+
"example": "parcel example.html"
23+
},
24+
"peerDependencies": {
25+
"react": "^16.7.0-alpha.0"
26+
},
27+
"devDependencies": {
28+
"ava": "^0.25.0",
29+
"browser-env": "^3.2.5",
30+
"parcel": "^1.10.3",
31+
"raf": "^3.4.0",
32+
"react": "^16.7.0-alpha.0",
33+
"react-dom": "^16.7.0-alpha.0",
34+
"react-test-renderer": "^16.7.0-alpha.0"
35+
},
36+
"ava": {
37+
"require": [
38+
"./test-setup.js"
39+
]
40+
}
41+
}

‎test-setup.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
require('raf/polyfill');
2+
require('browser-env')();

‎test.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
'use strict';
2+
let test = require('ava');
3+
let { createElement: h } = require('react');
4+
let ReactTestRenderer = require('react-test-renderer');
5+
let useInputValue = require('./');
6+
7+
function render(val) {
8+
return ReactTestRenderer.create(val);
9+
}
10+
11+
test(t => {
12+
function Component() {
13+
let value = use...();
14+
return h('div');
15+
}
16+
17+
let input = render(h(Component));
18+
19+
t.is(input.toJSON().props.value, '...');
20+
});

0 commit comments

Comments
 (0)