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>
  );
};

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>
  );
};

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>;
};