react-overflow-indicator
v0.2.2
Published
- Let users know when there’s more content to see in an `overflow` container, in case their device hides scrollbars. - Uses [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) for performance and accuracy –
Downloads
9,923
Readme
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
orresize
events. - Flexible: render any style of indicator you want (shadows, arrows, messages, etc.) wherever you want, using any styling solution.
Quick Start
Install:
$ yarn add react-overflow-indicator
Import:
import Overflow from 'react-overflow-indicator';
Render indicators automatically using <Overflow.Indicator>
inside of
<Overflow>
:
<Overflow>
<Overflow.Content>
Render an element or put your content directly here…
</Overflow.Content>
<Overflow.Indicator direction="down">👇</Overflow.Indicator>
</Overflow>
…or, use the onStateChange
prop to react to overflow however you like:
const [canScroll, setCanScroll] = useState(false);
return (
<>
<Overflow onStateChange={state => setCanScroll(state.canScroll.down)}>
<Overflow.Content>
Render an element or put your content directly here…
</Overflow.Content>
</Overflow>
{canScroll ? '👇' : '🌈'}
</>
);
API
Overflow
The overflow state provider. At a minimum it must contain an
<Overflow.Content>
element, otherwise it will do nothing.
<Overflow>
<Overflow.Content>
Your element(s) here!
</Overflow.Content>
<Overflow>
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
:
<Overflow style={{ maxHeight: 500 }}>…</Overflow>
Usage with styled-components:
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
Elements to render inside the outer container. This should include an
<Overflow.Content>
element at a minimum, but should also include your scroll
indicators if you’d like to overlay them on the scrollable viewport.
Callback that receives the latest overflow state and an object of refs, if you’d like to react to overflow in a custom way.
Distance (number of pixels or CSS length unit like 1em
) to the edge of the
content at which to consider the viewport fully scrolled. For example, if set to
10, then it will consider scrolling to have reached the end as long as it’s
within 10 pixels of the border. You can use this when your content has padding
and scrolling close to the edge should be good enough.
Overflow.Content
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 <Overflow>
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 <Overflow.Content>
instead – otherwise you risk interfering with the
styles this component needs to function.
Props
Content to render inside the scrollable viewport.
Overflow.Indicator
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 <Overflow>
ancestor.
You can provide a direction
prop to indicate when scrolling is allowed in a
particular direction:
<Overflow>
<Overflow.Content>…</Overflow.Content>
<Overflow.Indicator direction="right">👉</Overflow.Indicator>
</Overflow>
…or exclude it to indicate when scrolling is allowed in any direction:
<Overflow>
<Overflow.Content>…</Overflow.Content>
<Overflow.Indicator>←↕→</Overflow.Indicator>
</Overflow>
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:
<Overflow>
<Overflow.Indicator direction="down">
{canScroll => (canScroll ? '🔽' : '✅')}
</Overflow.Indicator>
</Overflow>
Props
Indicator to render when scrolling is allowed in the requested direction. If
given a function, it will be passed the overflow state and an object containing
the viewport
ref. You can use this refs
parameter to render an indicator
that is also a button that scrolls the viewport (for example).
The scrollabe direction to watch for. If not supplied, the indicator will be active when scrolling is allowed in any direction.
useOverflow
This hook provides full access to the Overflow’s context containing its current
state
and refs
. While <Overflow.Indicator>
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 <Overflow>
ancestor.
Returns an object like:
{
state: {
canScroll: {
up: Boolean,
left: Boolean,
right: Boolean,
down: Boolean
}
},
dispatch: Function,
tolerance: Number | String,
refs: {
viewport: Object
}
}
Examples
Make the indicator a button that scrolls the viewport
<Overflow.Indicator direction="down">
{(canScroll, refs) => (
<button
type="button"
onClick={() => {
refs.viewport.current.scrollBy({
top: refs.viewport.current.clientHeight,
behavior: 'smooth'
});
}}
style={{ position: 'absolute', right: 10, bottom: 10 }}
>
{canScroll ? '⏬' : '✅'}
</button>
)}
</Overflow.Indicator>
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.
What’s the purpose of each element?
When rendered, you’ll see a structure similar to this:
<div data-overflow-wrapper>
<div data-overflow-viewport>
<div data-overflow-content>
<div data-overflow-tolerance></div> (Optional)
Finally, your scrollable content here…
</div>
</div>
</div>
That seems like a lot! But each one serves a purpose – various CSS and DOM behaviors make this surprisingly difficult to implement otherwise.
From the top down:
- 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 aheight
ormax-height
to define the scrollable viewport size, it will be on this element. - The element with
data-scrollable-viewport
is the one withoverflow: auto
. It will match the size of its parent (thedata-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 thedata-scrollable-viewport
element to overflow. - The element with
data-scrollable-tolerance
will optionally be inserted if you use a nonzerotolerance
value; in that case, this element will be observed instead of the content element.