Skip to content
A React component that lets you know what elements are overflowing.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
jest.config.js
package-lock.json
package-scripts.js
package.json
webpack.config.js

README.md

Travis build status Codecov branch npm downloads MIT License

gzip size size

Maintainability PRs Welcome

react-dynamic-overflow

A React component that lets you know what elements are overflowing.

Getting started

npm install --save react-dynamic-overflow

Why?

react-dynamic-overflow is used for a specific UI pattern.

Imagine you are displaying 1 row of tabs with the same width.

+-------+-------+--------+--------+--------+
| Tab 1 | Tab 2 |  Tab 3 |  Tab 4 |  Tab 5 |
+-------+-------+--------+--------+--------+

When the page gets smaller, the 1 row of tabs may overflow into a second row.

+-------+-------+--------+
| Tab 1 | Tab 2 |  Tab 3 |
+-------+-------+--------+
| Tab 4 | Tab 5 |
+-------+-------+

What if we don't want a second row, and instead display a button that toggles those overflowing elements?

+-------+-------+--------+
| Tab 1 | Tab 2 |  More  |
+-------+-------+--------+

// Clicking on the More button...
+-------+-------+--------+
| Tab 1 | Tab 2 |  More  |
+-------+-------+--------+
                |  Tab 3 |
                +--------+
                |  Tab 4 |
                +--------+
                |  Tab 5 |
                +--------+

react-dynamic-overflow gives you an API that tells you what elements are visible and which have overflowed.

import React from "react";
import DynamicOverflow from "react-dynamic-overflow";

const Example = () => (
  <DynamicOverflow
    list={({ tabRef }) => ([
      <SomeTab ref={tabRef} key={0}>Tab 1</SomeTab>,
      <SomeTab key={1}>Tab 2</SomeTab>,
      <SomeTab key={2}>Tab 3</SomeTab>,
      <SomeTab key={3}>Tab 4</SomeTab>,
      <SomeTab key={4}>Tab 5</SomeTab>,
    ])}
  >
  {
    ({ visibleElements, overflowElements, containerRef }) => {
      return (
        <div ref={containerRef}>
          {visibleElements}

          <div>
            {overflowElements}
          </div>
        </div>
      );
    }
  }
  </DynamicOverflow>
);

API

Props Description Default
children (Function) A render prop function None. This is required
list (Function) A function that returns an array of elements that will be rendered None. This is required
throttle (Number) A number (in milliseconds) in which the resize window event will be throttled 200

children function

The children prop is a function that is called with the following arguments.

Name Description
visibleElements An array of elements from the list props which are visible. The first element will always be visible.
overflowElements An array of elements from the list props which are overflowed.
containerRef A ref function that should be added to the parent element. This element, combined with the tabRef, will be used in determining which elements are overflowed.

list function

The list prop is a function that is called with the following argument.

Name Description
tabRef A ref function that should be added to an element. This element, combined with the containerRef, will be used in determining which elements are overflowed.

Demo

See this CodeSandbox demo.

You can’t perform that action at this time.