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 = > visibleElements overflowElements containerRef return <div => 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.