Fork changes

• correct detection while zoomed out
• react-resize-detector with polyfill (https://caniuse.com/resizeobserver)

React Detectable Overflow

A React component which is able to detect changes in the state that the contents is overflowed.

Demo

Install

npm install react-detectable-overflow

or

yarn add react-detectable-overflow

Props

|prop|required|type|description|default| |:--|:--|:--|:--|:--| |tag||string|element type (e.g. 'p', 'div')|'div'| |style||object|css style of the element|{width: '100%',textOverflow: 'ellipsis',whiteSpace: 'nowrap',overflow: 'hidden',}| |className||string|class names|''| |onChange||(isOverflowed: boolean) => void|callback function called when its overflowing status is changed|

Example

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

class SampleComponent extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(isOverflowed) {
    // do something
  }

  render {
    return (
      <DetectableOverflow onChange={this.handleChange}>
        This is a sample text.
      </DetectableOverflow>
    );
  }
}

Caution

Be careful when you change the length of children contents by onChange callback. The following code perhaps causes the infinite loop of changing isOverflowed state.

// DO NOT WRITE LIKE THIS!
<DetectableOverflow
  onChange={(isOverflowed) => {
    if (isOverflowed) {
      this.setState({ value: 'short' });
    } else {
      this.setState({ value: 'loooooooooooooooooooooooooooooooooooooong' });
    }
  }}
  >
  {this.state.value}
</DetectableOverflow>

License

This package is released under the MIT License, see LICENSE

Changelog

0.4.0

• BREAKING CHANGE: Support vertical overflow detection