React-detectable-overflow NPM

React Detectable Overflow

A React hook and component detecting overflow state.

Demo

Install

npm install react-detectable-overflow

yarn add react-detectable-overflow

Example

Hook useOverflowDetector

import * as React from 'react';
import { useOverflowDetector } from 'react-detectable-overflow';

const SampleComponent = () => {
  const { ref, overflow } = useOverflowDetector({});

  return (
    <div
      ref={ref}
      style={{
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        width: '120px',
        backgroundColor: overflow ? 'red' : 'green',
      }}
    >
      This is a sample text.
    </div>
  );
};

Class DetectableOverflow

import * as React from 'react';
import DetectableOverflow from 'react-detectable-overflow';

const SampleComponent = () => {
  const [overflow, setOverflow] = useState(false);

  return (
    <DetectableOverflow
      onChange={setOverflow}
      style={{
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        width: '120px',
        backgroundColor: overflow ? '#F9E9CF' : '#BCF2E7',
      }}
    >
      This is a sample text.
    </DetectableOverflow>
  );
};

Caution

Be careful when the size of children content depends on overflow state. The following code perhaps causes the infinite loop of changing overflow state.

import * as React from 'react';
import { useOverflowDetector } from 'react-detectable-overflow';

// DO NOT WRITE LIKE THIS!
const SampleComponent = () => {
  const { ref, overflow } = useOverflowDetector({});

  return <div ref={ref}>{overflow ? 'short' : 'loooooooooooooooooooooooooooooooooooooong'}</div>;
};