react-use-scroll-hooks v1.1.4
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