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 }) => ([
      <span ref={tabRef} key={0}>Tab 1</span>,
      <span key={1}>Tab 2</span>,
      <span key={2}>Tab 3</span>,
      <span key={3}>Tab 4</span>,
      <span key={4}>Tab 5</span>,
    ])}
  >
  {
    ({ 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.