https://github.com/komlev/tiny-use-detect-horizontal-overflow
https://github.com/komlev/tiny-use-detect-horizontal-overflow
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/komlev/tiny-use-detect-horizontal-overflow
- Owner: komlev
- License: mit
- Created: 2022-08-27T11:48:31.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-29T12:08:11.000Z (almost 4 years ago)
- Last Synced: 2025-03-15T16:36:14.663Z (over 1 year ago)
- Language: JavaScript
- Size: 20.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tiny-use-detect-horizontal-overflow
Small (~1 Kb) react hook for detecting items are overflown.
Something like this:
https://user-images.githubusercontent.com/513452/187036364-28e55b05-2f6b-41d7-ab71-37df6b1d02a7.mp4
## Usage
```
npm i tiny-use-detect-horizontal-overflow --save
```
And in your react code
```js
import { useDetectHorizontalOverflow } from "tiny-use-detect-horizontal-overflow";
// ...
useDetectHorizontalOverflow(containerRef, (hiddenElements) => {
console.log(hiddenElements)
/*
It'll print out hidden elements which are overflown by container
(4) [li#Membeship, li#Register, li#Login, li#Learn]
*/
});
```
## API
Usage:
Let's say you have this JSX component
```jsx
```
And in order to use this hook:
```js
useDetectHorizontalOverflow(
containerRef, // react ref of container
(entries) => {}, // callback which will be called when number of hidden element is changed
listRef, // optional react ref for items parent - if items are not direct children of the container
throttleTimeout // optional timeout throttle timeout for resize callback, default is 16ms
);
```
## License
MIT