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

$3

`js
import { useWindowSize } from "react-use-size";

const YourComponent = () => {
const { height, width } = useWindowSize();

return (



Height: {height}

Width: {width}

);
};
`

$3

`js
import { useComponentSize } from "react-use-size";

const YourComponent = () => {
const { ref, height, width } = useComponentSize();

return (





);
};
`

$3

`js
import { useBreakpoint } from "react-use-size";

const YourComponent = () => {
const isSmall = useBreakpoint(640);

if (isSmall) {
return
} else {
return
}
};
`

$3

`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 and here.

Found a problem?

Please open an issue or submit a PR, we will be more than happy to help