Skip to content
This repository has been archived by the owner on Nov 9, 2022. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

Aloushek/react-detectable-overflow

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Fork changes

React Detectable Overflow

Circle Status npm version

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

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 72.4%
  • Shell 27.6%