Skip to content

Commit 05d98bc

Browse files
int64agoint64ago
committed
feat: init
0 parents  commit 05d98bc

File tree

13 files changed

+427
-0
lines changed

13 files changed

+427
-0
lines changed

‎.babelrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react"
5+
]
6+
}

‎.eslintrc‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"parser": "babel-eslint",
3+
"env": {
4+
"browser": true,
5+
"node": true,
6+
"jest": true
7+
},
8+
"extends": [
9+
"eslint:recommended",
10+
"plugin:react/recommended"
11+
],
12+
"plugins": [
13+
"react-hooks"
14+
],
15+
"rules": {
16+
"react-hooks/rules-of-hooks": "error"
17+
},
18+
"settings": {
19+
"react": {
20+
"version": "16.7.0-alpha"
21+
}
22+
}
23+
}

‎.gitignore‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
14+
# Directory for instrumented libs generated by jscoverage/JSCover
15+
lib-cov
16+
17+
# Coverage directory used by tools like istanbul
18+
coverage
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (https://nodejs.org/api/addons.html)
33+
build/Release
34+
dist
35+
__site__
36+
37+
# Dependency directories
38+
node_modules/
39+
jspm_packages/
40+
41+
# TypeScript v1 declaration files
42+
typings/
43+
44+
# Optional npm cache directory
45+
.npm
46+
47+
# Optional eslint cache
48+
.eslintcache
49+
50+
# Optional REPL history
51+
.node_repl_history
52+
53+
# Output of 'npm pack'
54+
*.tgz
55+
56+
# Yarn Integrity file
57+
.yarn-integrity
58+
59+
# dotenv environment variables file
60+
.env
61+
62+
# next.js build output
63+
.next

‎.travis.yml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
language: node_js
2+
3+
node_js:
4+
- 8
5+
6+
branches:
7+
only:
8+
- master
9+
10+
install:
11+
- npm install
12+
13+
script:
14+
- npm test
15+
- npm run example
16+
17+
deploy:
18+
provider: pages
19+
skip_cleanup: true
20+
github_token: $GITHUB_TOKEN
21+
local_dir: __site__
22+
on:
23+
branch: master

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018
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.

‎README.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# react-hooks-image-size
2+
3+
[![NPM version][npm-image]][npm-url]
4+
[![npm download][download-image]][download-url]
5+
[![Build Status][travis-image]][travis-url]
6+
7+
Custom React Hooks for image natural size.
8+
9+
## Install
10+
11+
>**Note:** The Hooks isn't stable now, the stable version will be available on [Q1 of 2019](https://reactjs.org/blog/2018/11/27/react-16-roadmap.html).
12+
>
13+
>Make sure that you have installed the correct version of `react(>= v16.7.0-alpha)` and `react-dom(>= v16.7.0-alpha)`.
14+
15+
### npm
16+
17+
```bash
18+
npm install --save @use-hooks/image-size
19+
```
20+
21+
### yarn
22+
23+
```bash
24+
yarn add @use-hooks/image-size
25+
```
26+
27+
## API
28+
29+
### Params
30+
31+
```js
32+
/**
33+
* Params
34+
* @param {string} url - The image url
35+
*/
36+
```
37+
38+
### Returns
39+
40+
```js
41+
/**
42+
* Returns
43+
* @param {array} size - The image size [width, height]
44+
*/
45+
```
46+
47+
## Usage
48+
49+
```js
50+
import React from 'react';
51+
import useImageSize from '@use-hooks/image-size';
52+
53+
export default function App() {
54+
const url = 'https://cdn.int64ago.org/ogk39i54.png';
55+
56+
const [width, height] = useImageSize(url);
57+
58+
return (
59+
<div>
60+
Natural size: {width} x {height}
61+
</div>
62+
);
63+
}
64+
```
65+
66+
See `./example` for a full [example](https://use-hooks.github.io/react-hooks-image-size/).
67+
68+
## Have a try
69+
70+
> Node >= v8 LTS
71+
72+
- Clone the project to local disk
73+
- `npm install`
74+
- `npm start`
75+
76+
## License
77+
78+
MIT
79+
80+
> Generated by [create-react-hooks](https://github.com/use-hooks/create-react-hooks).
81+
82+
[npm-image]: https://img.shields.io/npm/v/@use-hooks/image-size.svg?style=flat-square
83+
[npm-url]: https://npmjs.org/package/@use-hooks/image-size
84+
[download-image]: https://img.shields.io/npm/dm/@use-hooks/image-size.svg?style=flat-square
85+
[download-url]: https://npmjs.org/package/@use-hooks/image-size
86+
[travis-url]: https://travis-ci.org/use-hooks/react-hooks-image-size
87+
[travis-image]: https://img.shields.io/travis/use-hooks/react-hooks-image-size.svg?style=flat-square

‎__tests__/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
describe('hooks test', () => {
2+
it('should be a function', () => {
3+
expect(require('../src/index').default).toEqual(expect.any(Function));
4+
});
5+
});

‎example/App.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
3+
import useImageSize from '../src';
4+
5+
export default function App() {
6+
const url = 'https://cdn.int64ago.org/ogk39i54.png';
7+
const [width, height] = useImageSize(url);
8+
9+
return (
10+
<div>
11+
<h2>DEMO of <span style={{ color: '#F44336' }}>@use-hooks/image-size</span></h2>
12+
<div>
13+
<img src={url} width={100} height={100} alt=""/>
14+
<div>Natural size: {width} x {height}</div>
15+
</div>
16+
</div>
17+
);
18+
}

‎example/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>react hooks example</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
</body>
12+
</html>

‎example/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
import App from './App';
5+
6+
ReactDOM.render(<App />, document.getElementById('app'));
7+
8+
if (module.hot) {
9+
module.hot.accept();
10+
}

0 commit comments

Comments
 (0)