findDOMNode is deprecated in StrictMode

React Detectable Overflow

A React hook and component detecting overflow state.

Demo

Install

npm install react-detectable-overflow

or

yarn add react-detectable-overflow

Example

Hook useOverflowDetector

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

Class DetectableOverflow

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

Caution

Be careful when the size of children content depends on overflow state. The following code perhaps causes the infinite loop of changing overflow state.

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

License

This package is released under the MIT License, see LICENSE

Changelog

0.8.0

Add properties handleHeight and handleWidth

0.7.0

Add useOverflowDetector

0.4.0

BREAKING CHANGE: Support vertical overflow detection

	return React.createElement(
	tag,
	props,
	<ReactResizeDetector handleWidth onResize={this.updateState} />,
	this.props.children,
	);

h-kanazawa / react-detectable-overflow Goto Github PK

react-detectable-overflow's Introduction

React Detectable Overflow

Install

Example

Hook useOverflowDetector

Class DetectableOverflow

Caution

License

Changelog

0.8.0

0.7.0

0.4.0

react-detectable-overflow's People

Contributors

Stargazers

Watchers

Forkers

react-detectable-overflow's Issues

Recommend Projects

Recommend Topics

Recommend Org