
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
autoscroll-react
Advanced tools
Autoscroll a react component
npm install --save autoscroll-react
This package exports a function that takes a React.Component
and returns a React.PureComponent
that renders the passed component without any additional markup. Whenever the wrapped component updates, it is scrolled to the bottom, unless the user has scrolled up. In addition (since 3.1.0), when the list is resized (when content is added), it will be scrolled in order to keep the user's original scroll position.
import React from 'react'
import autoscroll from 'autoscroll-react'
import Item from './Item'
class MyList extends React.Component {
render(){
const { items, ...props } = this.props
return (
<ul { ...props } >{ // ⚠️ You MUST pass down props, otherwise the event listener will not be attached ⚠️
items.map(
item => <Item
key={ item.id }
{...item}
/>
)
}</ul>
)
}
}
export default autoscroll(MyList)
Then, in another file:
import React from 'react'
import MyList from './MyList'
export default ({ items, fetchMoreItems }) => <div>
<MyList
items={items} /* pass props directly to your component */
onScrolledTop={e => fetchMoreItems()} /* add props to be intercepted by autoscroll */
onScrolled={e => console.log('the list was scrolled')}
/>
{/* ... */}
</div>
Autoscroll
.Autoscroll
uses a ref
.overflow-y:scroll;
and a set height
)Optional props:
onScrolled
: called whenever the list is scrolled. This is not an event listener.onScrolledTop
: called when the list is scrolled to the top.
Pass these props when rendering the wrapped list component.autoscroll(Component, { isScrolledDownThreshold: 150 /*default*/})
The isScrolledDownThreshold
option is used when determining whether the user has scrolled back to the bottom. If the element's scrollBottom
is within isScrolledDownThreshold
px of the maximum scroll (scrollHeight
), the component will scroll down on the next updates.
This option exists because scrolling almost all the way down, but not entirely, can be interpreted as a sign that the user intends to see the bottom of the list.
Set it to 0 to enforce scrolling all the way down.
FAQs
autoscroll a react component
The npm package autoscroll-react receives a total of 498 weekly downloads. As such, autoscroll-react popularity was classified as not popular.
We found that autoscroll-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.