Allow a UI element to scroll off screen as the user scrolls down, but as soon as the user scrolls up, begin revealing the element.
Useful for navigation and other persistent elements which we want highly available, but to not consume screen realestate until needed.
npm install react-peek-element
or
yarn add react-peek-element
<PeekElement config={ [config] }>
[children]
</PeekElement>
- config - (optional) object containing:
sizeListener
- will receive a bounding rect when the dimensions or scroll position of the element changes.parentProps
,childProps
,placeHolderProps
- Entry values will be spread into the respective elements. Apply classNames, styles, event handlers etc. Use with caution.revealDuration
- If you're using the alt usage (See below), this determines the animation length in milliseconds.
<PeekElement config={ [config] }>
({hide, show}) => [children]
</PeekElement>
- {hide, show} - Alternatively, children can be passed as a function which accepts an object containing two methods -
hide
, andshow
. Should the wrapped element need to change its visibility, it can callshow()
orhide()
Notes:
- The element wrapping your child element will have convenience classes applied while scrolling, so you can restyle your element as needed.
- scrolling-up
- scrolling-down
- To do: make these configurable.
.my-element { box-shadow: none; }
.scrolling-up .my-element,
.scrolling-down .my-element {
box-shadow: 0 1rem 3rem #0001, 0 0 .5rem #0002;
}