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.