jetbridge / react-detectable-overflow Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

TypeScript 72.34% Shell 27.66%

react-detectable-overflow's Introduction

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

yarn add react-detectable-overflow

Props

prop	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>