React useScrollHooks
Install
yarn add react-use-scroll-hooks
Quick Start
useScroll Hooks
import classNames from 'classnames'
import useScroll from 'react-use-scroll-hooks'
function App({ children }: React.PropsWithChildren<{}>) {
const { scrollRef, scrollState } = useScroll()
const className = classNames({
wrapper: true,
'wrapper-shadow-left': scrollState.leftScrollable,
'wrapper-shadow-right': scrollState.rightScrollable
})
return (
<div className={className}>
<ul className="list" ref={scrollRef}>
{children}
</ul>
</div>
)
}
Scroll Container
import { ScrollContainer } from 'react-use-scroll-hooks'
export function Container() {
const [items, setItems] = useState(['foo', 'bar'])
const handleAddItem = () => {
setItems((items) => [...items, `item:${items.length + 1}`])
}
return (
<div>
<ScrollContainer classNames='container'>
<ul className="list">
{items.map((it) => (
<li className="item" key={it}>{it}</li>
))}
</ul>
</ScrollContainer>
<button onClick={handleAddItem}>add Item</button>
</div>
)
}
Reference
useScroll
const { scrollRef, scrollState } = useScroll()
-
scrollRef
:React.RefCallback<HtmlElement>
- The ref callback for the scrollable element.
why?: https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
-
scrollState
:ScrollState
- The scroll state of the scrollable element.-
horizontal state:
-
hScrollable
:boolean
- Whether the scrollable element is horizontally scrollable. -
leftScrollable
:boolean
- Whether the scrollable element can be scrolled to the left. -
rightScrollable
:boolean
- Whether the scrollable element can be scrolled to the right. -
scrollWidth
:number
- The scrollWidth of the scrollable element. -
clientWidth
:number
- The clientWidth of the scrollable element. -
reachLeft
:number
- Whether the scrolling element has been scrolled to the left. -
reachRight
:number
- Whether the scrolling element has been scrolled to the right. -
vertical state:
-
vScrollable
:boolean
- Whether the scrollable element is vertical scrollable. -
topScrollable
:boolean
- Whether the scrollable element can be scrolled to the top. -
bottomScrollable
:boolean
- Whether the scrollable element can be scrolled to the bottom. -
scrollHeight
:number
- The scrollHeight of the scrollable element. -
clientHeight
:number
- The clientHeight of the scrollable element. -
reachTop
:number
- Whether the scrolling element has been scrolled to the top. -
reachBottom
:number
- Whether the scrolling element has been scrolled to the bottom.
-
ScrollContainer
<ScrollContainer onChange={} style={} classNames={} children as={} htmlProps={} />
-
onChange
:function
- The callback function when the scroll state changes. -
style
:object
- The style of the scrollable container element. -
classNames
:ScrollableContainerClassNames
- The class name of the scrollable container element.string
orobject
:-
normal
:string
- The normal class name of the scrollable container element. -
leftScrollable
:string
- The class name of the scrollable container element when scrollable element hasleftScrollable
state. -
rightScrollable
:string
- The class name of the scrollable container element when scrollable element hasrightScrollable
state. -
topScrollable
:string
- The class name of the scrollable container element when scrollable element hastopScrollable
state. -
bottomScrollable
:string
- The class name of the scrollable container element when scrollable element hasbottomScrollable
state.
-
A single name can be provided, which will be suffixed for each stage. For example,
container
will be suffixed tocontainer-left-scrollable
,container-right-scrollable
,container-top-scrollable
,container-bottom-scrollable
.
-
as
:ComponentType
-ScrollContainer
renderdiv
by default, You can change this behavior by providing a as prop. -
children
:ReactElement|(ref, scrollState)=>ReactNode
- The children of the scrollable container element.(That is, scrollable elements). If that type isReactElement
, it must be able to receive ref props. (that is: React.forwardRef wrapped function component, html element, or class component) -
htmlProps
:object
- The html props of the scrollable container element.
How
callbackRef
https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
Listen Scroll Event
https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event
mutationObserver observe dynamic content
Why mutationObserver? https://stackoverflow.com/questions/44428370/detect-scrollheight-change-with-mutationobserver