React hook/component to detect overflow state
npm install react-detectable-overflow
A React hook and component detecting overflow state.
``
npm install react-detectable-overflow
or
`
yarn add react-detectable-overflow
`jsx
import * as React from 'react';
import { useOverflowDetector } from 'react-detectable-overflow';
const SampleComponent = () => {
const { ref, overflow } = useOverflowDetector({});
return (
style={{
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
width: '120px',
backgroundColor: overflow ? 'red' : 'green',
}}
>
This is a sample text.
$3
jsx
import * as React from 'react';
import DetectableOverflow from 'react-detectable-overflow';const SampleComponent = () => {
const [overflow, setOverflow] = useState(false);
return (
style={{
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
width: '120px',
backgroundColor: overflow ? '#F9E9CF' : '#BCF2E7',
}}
>
This is a sample text.
);
};
`Caution
Be careful when the size of
content depends on overflow state. The following code perhaps causes the infinite loop of changing overflow state.`jsx
import * as React from 'react';
import { useOverflowDetector } from 'react-detectable-overflow';// DO NOT WRITE LIKE THIS!
const SampleComponent = () => {
const { ref, overflow } = useOverflowDetector({});
return
{overflow ? 'short' : 'loooooooooooooooooooooooooooooooooooooong'};
};
`License
This package is released under the MIT License, see LICENSE
Changelog
#### 0.8.0
- Add properties
and handleWidth`#### 0.7.0
- Add useOverflowDetector
#### 0.4.0
- BREAKING CHANGE: Support vertical overflow detection