File tree Expand file tree Collapse file tree 2 files changed +16
-5
lines changed Expand file tree Collapse file tree 2 files changed +16
-5
lines changed Original file line number Diff line number Diff line change @@ -48,24 +48,29 @@ yarn add @use-hooks/image-size
48
48
49
49
``` js
50
50
import React from ' react' ;
51
+
51
52
import useImageSize from ' @use-hooks/image-size' ;
52
53
53
54
export default function App () {
54
55
const url = ' https://cdn.int64ago.org/ogk39i54.png' ;
55
-
56
56
const [width , height ] = useImageSize (url);
57
57
58
58
return (
59
59
< div>
60
- Natural size: {width} x {height}
60
+ < h2> DEMO of < span style= {{ color: ' #F44336' }}> @use- hooks/ image- size< / span>< / h2>
61
+ < div>
62
+ < img src= {url} width= {100 } height= {100 } alt= " " / >
63
+ < div> Natural size: {width} x {height}< / div>
64
+ < / div>
61
65
< / div>
62
66
);
63
67
}
68
+
64
69
```
65
70
66
- See ` ./example ` for a full [ example ] ( https://use-hooks.github.io/react-hooks-image-size/ ) .
71
+ [ Live Show ] ( https://use-hooks.github.io/react-hooks-image-size/ )
67
72
68
- ## Have a try
73
+ ## Development
69
74
70
75
> Node >= v8 LTS
71
76
Original file line number Diff line number Diff line change 1
1
{
2
2
"name" : " @use-hooks/image-size" ,
3
3
"version" : " 1.0.0" ,
4
- "description" : " Custom React Hooks for image natural size" ,
4
+ "description" : " Custom React Hooks for image natural size. " ,
5
5
"main" : " dist/index.js" ,
6
6
"files" : [
7
7
" dist"
11
11
"start" : " webpack-dev-server --progress --color" ,
12
12
"build" : " webpack --env build" ,
13
13
"example" : " webpack --env example" ,
14
+ "readme" : " use-hooks-readme" ,
14
15
"lint" : " eslint src example" ,
15
16
"lint:fix" : " eslint src example --fix" ,
16
17
"prepublishOnly" : " npm run build"
45
46
"jest" : " ^23.6.0" ,
46
47
"lint-staged" : " ^8.1.0" ,
47
48
"regenerator-runtime" : " ^0.13.1" ,
49
+ "use-hooks-readme" : " ^1.0.1" ,
48
50
"webpack" : " ^4.27.1" ,
49
51
"webpack-cli" : " ^3.1.2" ,
50
52
"webpack-dev-server" : " ^3.1.10"
58
60
"*.{js,jsx}" : [
59
61
" eslint --fix" ,
60
62
" git add"
63
+ ],
64
+ "*.{js,jsx,json}" : [
65
+ " use-hooks-readme" ,
66
+ " git add README.md"
61
67
]
62
68
},
63
69
"dependencies" : {
You can’t perform that action at this time.
0 commit comments