Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/use-hooks/react-hooks-image-size
Custom React Hooks for image natural size
https://github.com/use-hooks/react-hooks-image-size
react react-hooks
Last synced: about 1 month ago
JSON representation
Custom React Hooks for image natural size
- Host: GitHub
- URL: https://github.com/use-hooks/react-hooks-image-size
- Owner: use-hooks
- License: mit
- Created: 2018-12-12T03:41:54.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-16T23:27:17.000Z (over 5 years ago)
- Last Synced: 2024-04-14T01:35:15.845Z (8 months ago)
- Topics: react, react-hooks
- Language: JavaScript
- Size: 221 KB
- Stars: 19
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-hooks-image-size`
- awesome-react-hooks-cn - `react-hooks-image-size`
- awesome-react-hooks - `react-hooks-image-size`
- awesome-react-hooks - `react-hooks-image-size`
- awesome-react-hooks - react-hooks-image-size - Custom React Hooks for image natural size (Packages)
README
# react-hooks-image-size
[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![Build Status][travis-image]][travis-url]
Custom React Hooks for image natural size.
## Install
>**Note:** Make sure that you have installed the correct version of `react(>= v16.8.0)` and `react-dom(>= v16.8.0)`.
### npm
```bash
npm install --save @use-hooks/image-size
```
### yarn
```bash
yarn add @use-hooks/image-size
```
## API
### Params
```js
/**
* Params
* @param {string} url - The image url
*/
```
### Returns
```js
/**
* Returns
* @param {array} size - The image size [width, height]
*/
```
## Usage
```js
import React from 'react';
import useImageSize from '@use-hooks/image-size';
export default function App() {
const url = 'https://cdn.int64ago.org/ogk39i54.png';
const [width, height] = useImageSize(url);
return (
DEMO of @use-hooks/image-size
Natural size: {width} x {height}
);
}
```
[Live Show](https://use-hooks.github.io/react-hooks-image-size/)
## Development
> Node >= v8 LTS
- Clone the project to local disk
- `npm install`
- `npm start`
## License
MIT
> Generated by [create-react-hooks](https://github.com/use-hooks/create-react-hooks).
[npm-image]: https://img.shields.io/npm/v/@use-hooks/image-size.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@use-hooks/image-size
[download-image]: https://img.shields.io/npm/dm/@use-hooks/image-size.svg?style=flat-square
[download-url]: https://npmjs.org/package/@use-hooks/image-size
[travis-url]: https://travis-ci.com/use-hooks/react-hooks-image-size
[travis-image]: https://img.shields.io/travis/com/use-hooks/react-hooks-image-size.svg?style=flat-square