react-overflow-indicator ⏬

- Let users know when there’s more content to see in an overflow container, in
case their device hides scrollbars.
- Uses
Intersection Observer
for performance and accuracy – no listening for scroll or resize events.
- Flexible: render any style of indicator you want (shadows, arrows, messages,
etc.) wherever you want, using any styling solution.

Quick Start

Install:

``console
$ yarn add react-overflow-indicator
`

Import:

`js
import Overflow from 'react-overflow-indicator';
`

Render indicators automatically using inside of
:

`jsx


Render an element or put your content directly here…

👇

`

…or, use the onStateChange prop to react to overflow however you like:

`jsx
const [canScroll, setCanScroll] = useState(false);

return (
<>
setCanScroll(state.canScroll.down)}>

Render an element or put your content directly here…


{canScroll ? '👇' : '🌈'}

);
`

API

$3

The overflow state provider. At a minimum it must contain an
element, otherwise it will do nothing.

`jsx


Your element(s) here!


`

As with any standard element, its height must be limited in some way in order
for it to actually scroll. Apply that style as you would any other element, with
style or className:

`jsx
…
`

Usage with styled-components:

`jsx
const MyContainer = styled(Overflow)
max-height: 500px;
;
`

Any remaining props beyond those documented below will be passed along to the
underlying DOM element. Use this to pass className, style, or any other
native attribute.

#### Props

$3

Wrapper for content to render inside the scrollable viewport. This element will
grow to whatever size it needs to hold its content, and will cause the parent
viewport element to overflow. It must be rendered inside an
ancestor.

Although you can style this element directly by passing additional props like
className and style, it’s preferable to include styling on your own element
inside instead – otherwise you risk interfering with the
styles this component needs to function.

#### Props

$3

A helper component for rendering your custom indicator when the viewport is
scrollable in a particular direction (or any direction). Must be rendered inside
an ancestor.

You can provide a direction prop to indicate when scrolling is allowed in a
particular direction:

`jsx

…
👉

`

…or exclude it to indicate when scrolling is allowed in any direction:

`jsx

…
←↕→

`

This component will mount its children when scrolling is allowed in the
requested direction, and unmount them otherwise. If you’d rather remain mounted
(to allow transitions, for example), then render a function. It will be supplied
with a Boolean (if direction is supplied) or an object with up, left,
right, and down properties:

`jsx


{canScroll => (canScroll ? '🔽' : '✅')}


`

#### Props

This hook provides full access to the Overflow’s context containing its current
state and refs. While should be good enough for most
use cases, you can use this if you have other use cases in mind. Must be used
inside an ancestor.

Returns an object like:

`js
{
state: {
canScroll: {
up: Boolean,
left: Boolean,
right: Boolean,
down: Boolean
}
},
dispatch: Function,
tolerance: Number | String,
refs: {
viewport: Object
}
}
`

Examples

$3

`jsx

{(canScroll, refs) => (
type="button"
onClick={() => {
refs.viewport.current.scrollBy({
top: refs.viewport.current.clientHeight,
behavior: 'smooth'
});
}}
style={{ position: 'absolute', right: 10, bottom: 10 }}
>
{canScroll ? '⏬' : '✅'}

)}

`

Implementation Details

Instead of the traditional method of listening for scroll and resize events,
this uses the more performant
Intersection Observer API.

Here, an IntersectionObserver watches each of the 4 sides of the viewport
element to see when the scrollable content extends past that edge.

$3

When rendered, you’ll see a structure similar to this:

`


- The element with data-scrollable-wrapper contains everything. If you want to
insert some indicator overlay (like shadows, an arrow, a floating message),
they should usually be children of this element so that they’ll be siblings of
the scrollable viewport and thus will remain in their positions instead of
scrolling away. When you define a height or max-height to define the
scrollable viewport size, it will be on this element.
- The element with data-scrollable-viewport is the one with overflow: auto.
It will match the size of its parent (the data-scrollable-wrapper). Any
indicators you render will usually be siblings of this element.
- The element with data-scrollable-content contains your content. It will grow
to whatever size it needs and potentially cause the data-scrollable-viewport
element to overflow.
- The element with data-scrollable-tolerance will optionally be inserted if
you use a nonzero tolerance` value; in that case, this element will be
observed instead of the content element.