# react-dynamic-overflow

> A React Component that lets you know what elements are overflowing

Latest version **1.1.0** (published 2018-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dynamic-overflow
pnpm add react-dynamic-overflow
yarn add react-dynamic-overflow
bun add react-dynamic-overflow
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-03-12 |
| First published | 2018-03-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 66.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Anthony Ng |
| Maintainers | newyork.anthonyng |
| Keywords | react, component, overflow, dynamic |

## Links

- npm: https://www.npmjs.com/package/react-dynamic-overflow
- Repository: https://github.com/newyork-anthonyng/react-dynamic-overflow
- Homepage: https://github.com/newyork-anthonyng/react-dynamic-overflow#readme
- Issues: https://github.com/newyork-anthonyng/react-dynamic-overflow/issues
- npm.io page: https://npm.io/package/react-dynamic-overflow

## Dependencies (1)

- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2018-03-12
- 1.0.0 — 2018-03-12

## README

[![Travis build status][travis-badge]][travis-build]
[![Codecov branch][codecov-badge]][codecov]
[![npm][npm-badge]][npm-version]
[![downloads][downloads-badge]][npmcharts]
[![MIT License][license-badge]][license]

[![gzip size][gzip-badge]][unpkg]
[![size][size-badge]][unpkg]

[![Maintainability][code-climate-badge]][code-climate]
[![PRs Welcome][pull-request-badge]](http://makeapullrequest.com)

# react-dynamic-overflow
A React component that lets you know what elements are overflowing.

# Getting started
```shell
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.

```jsx
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](#children-function) | (**Function**) [A render prop](https://reactjs.org/docs/render-props.html) function | None. This is required |
| [list](#list-function) | (**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](https://reactjs.org/docs/refs-and-the-dom.html) 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](https://reactjs.org/docs/refs-and-the-dom.html) 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]().

[codecov]: https://codecov.io/gh/newyork-anthonyng/react-dynamic-overflow
[codecov-badge]: https://img.shields.io/codecov/c/github/newyork-anthonyng/react-dynamic-overflow/master.svg
[code-climate]: https://codeclimate.com/github/newyork-anthonyng/react-dynamic-overflow/maintainability
[code-climate-badge]: https://api.codeclimate.com/v1/badges/faefec967ef40a030c3e/maintainability
[downloads-badge]: https://img.shields.io/npm/dm/react-dynamic-overflow.svg?style=flat-square
[license]: https://github.com/newyork-anthonyng/react-dynamic-overflow/blob/master/LICENSE
[license-badge]: https://img.shields.io/npm/l/react-dynamic-overflow.svg?style=flat-square
[npmcharts]: https://npmcharts.com/compare/react-dynamic-overflow
[npm-version]:https://www.npmjs.com/package/react-dynamic-overflow
[npm-badge]: https://img.shields.io/npm/v/react-dynamic-overflow.svg?style=flat-square
[pull-request-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[travis-badge]: https://travis-ci.org/newyork-anthonyng/react-dynamic-overflow.svg?branch=master
[travis-build]: https://travis-ci.org/newyork-anthonyng/react-dynamic-overflow
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-dynamic-overflow?compression=gzip&label=gzip%20size&style=flat-square
[size-badge]: http://img.badgesize.io/https://unpkg.com/react-dynamic-overflow?label=size&style=flat-square
[unpkg]: https://unpkg.com/react-dynamic-overflow

---
_Source: https://npm.io/package/react-dynamic-overflow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._