https://github.com/thomasthiebaud/react-use-size
A collection of hooks to measure things in React
https://github.com/thomasthiebaud/react-use-size
hooks react react-hooks
Last synced: 23 days ago
JSON representation
A collection of hooks to measure things in React
- Host: GitHub
- URL: https://github.com/thomasthiebaud/react-use-size
- Owner: thomasthiebaud
- License: mit
- Created: 2019-05-08T16:29:55.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-18T20:27:28.000Z (11 months ago)
- Last Synced: 2024-10-30T05:57:02.815Z (6 months ago)
- Topics: hooks, react, react-hooks
- Language: TypeScript
- Homepage:
- Size: 2.67 MB
- Stars: 69
- Watchers: 2
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/semantic-release/semantic-release)
# react-use-size
A collection of hooks to measure things in React
## Installation
```
npm i react-use-size
// or
yarn add react-use-size
```
## Usage
### useWindowSize
```js
import { useWindowSize } from "react-use-size";
const YourComponent = () => {
const { height, width } = useWindowSize();
return (
Height: {height}
Width: {width}
);
};
```
### useComponentSize
```js
import { useComponentSize } from "react-use-size";
const YourComponent = () => {
const { ref, height, width } = useComponentSize();
return (
Component
Height: {height}
Width: {width}
);
};
```
### useBreakpoint
```js
import { useBreakpoint } from "react-use-size";
const YourComponent = () => {
const isSmall = useBreakpoint(640);
if (isSmall) {
return
} else {
return
}
};
```
### useBreakpoints
```js
import { useBreakpoints } from "react-use-size";
const YourComponent = () => {
const [isSmall, isMedium] = useBreakpoints([640, 1024]);
if (isSmall) {
return
} else if(isMedium) {
return
} else {
return
}
};
```
## How to contribute?
This repo enforce commit style so the release process is automatic. Commits must look like:
> SUBJECT: message starting with a lowercase
where SUBJECT is one of:
- build
- ci
- chore
- docs
- feat
- fix
- perf
- refactor
- revert
- style
- test
A commit including `BREAKING CHANGE:` in the body will create a new major release.
More details about the conventions are available [here](https://www.conventionalcommits.org/en/v1.0.0-beta.4/#summary) and [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional).
## Found a problem?
Please open an issue or submit a PR, we will be more than happy to help