@aloushek/react-detectable-overflow v0.7.0

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

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