{"id":15637128,"url":"https://github.com/thk2b/autoscroll-react","last_synced_at":"2025-08-19T22:32:45.899Z","repository":{"id":57187636,"uuid":"116194043","full_name":"thk2b/autoscroll-react","owner":"thk2b","description":"Automatically scrolls a component to the bottom, unless the user has scrolled up.","archived":false,"fork":false,"pushed_at":"2018-12-12T05:34:54.000Z","size":249,"stargazers_count":111,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-09T19:53:32.486Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thk2b.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-04T00:03:23.000Z","updated_at":"2023-12-31T01:35:14.000Z","dependencies_parsed_at":"2022-08-28T13:00:30.896Z","dependency_job_id":null,"html_url":"https://github.com/thk2b/autoscroll-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Fautoscroll-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Fautoscroll-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Fautoscroll-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Fautoscroll-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thk2b","download_url":"https://codeload.github.com/thk2b/autoscroll-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230374126,"owners_count":18216042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T11:10:22.229Z","updated_at":"2024-12-19T04:07:49.215Z","avatar_url":"https://github.com/thk2b.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# autoscroll-react \r\n\r\n[![npm version](https://badge.fury.io/js/autoscroll-react.svg)](https://badge.fury.io/js/autoscroll-react)\r\n[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)\r\n\r\n## Install\r\n\r\n`npm install --save autoscroll-react`\r\n\r\n## What it does\r\n\r\n[live demo](https://codesandbox.io/s/0315qvkx20)\r\n\r\nThis package exports a function that takes a `React.Component` \u003cb\u003eclass\u003c/b\u003e and returns a `React.PureComponent` that renders the passed component without any additional markup. It adds the following behaviours to the wrapped component:\r\n\r\n- Whenever the list updates, it is scrolled to the bottom, unless the user has scrolled up.\r\n\r\nSuppose the wrapped component is a chat. When a message is added, the chat should be scrolled to the bottom to show the lastest message. But if the user has scrolled up, and a new message is posted by another user, the list should *not* scroll down to show the new message, as the user is reading another message.\r\n\r\n- If the list is scrolled all the way up and content is added, the current scroll position is preserved.\r\n\r\nThis feature was added to suport infinite scrolling lists where new content is fetched when the list is scrolled all the way up. Again, consider the case where the wrapped component is a chat. When the user scrolls all the way up, the app (somehow) gets older messages from the server and adds them to the list. By default, the current scroll position of the list is preserved, leading to the the list showing the first of the newly added messages instead of the previous last message. This means the list 'jumps' when content is added to the top of the list. A pragmatic solution to this issue is to scroll down the list by the correct amount when it updates and is scrolled all the way up. But this causes some issues when the list is scrolled all the way up and content is added to the bottom.\r\n\r\n## Usage\r\n\r\n```js\r\nimport React from 'react'\r\nimport autoscroll from 'autoscroll-react'\r\n\r\nimport Item from './Item'\r\n\r\nclass MyList extends React.Component {\r\n    render(){\r\n        const { items, ...props } = this.props\r\n        return (\r\n            \u003cul { ...props } \u003e{ //  ⚠️ You MUST pass down props, otherwise the event listener will not be attached ⚠️\r\n                items.map(\r\n                    item =\u003e \u003cItem \r\n                        key={ item.id } \r\n                        {...item}\r\n                    /\u003e\r\n                )\r\n            }\u003c/ul\u003e\r\n        )\r\n    }\r\n}\r\n\r\nexport default autoscroll(MyList)\r\n```\r\nThen, in another file:\r\n```js\r\nimport React from 'react'\r\nimport MyList from './MyList'\r\n\r\nexport default ({ items, fetchMoreItems }) =\u003e \u003cdiv\u003e\r\n    \u003cMyList\r\n        items={items} /* pass props directly to your component */\r\n        onScrolledTop={e =\u003e fetchMoreItems()} /* add props to be intercepted by autoscroll */\r\n        onScrolled={e =\u003e console.log('the list was scrolled')}\r\n    /\u003e\r\n    {/* ... */}\r\n\u003c/div\u003e\r\n```\r\n\r\n## ⚠️  caveats ⚠️ \r\n\r\n- You must Explicitly pass down props to the wrapped component. This is so an event listener can be attached. This means you can also pass down your own props to the wrapped component by passing them to the component returned by `Autoscroll`.\r\n- The wrapped component must be a Class-based component, not a functional one, because `Autoscroll` uses a `ref`.\r\n- This package is agnostic about any CSS you use. However, it assumes that you provide the adequate CSS to make the wrapped component have a scroll bar. (ie. `overflow-y:scroll;` and a set `height`)\r\n\r\n# API\r\n## props\r\n\r\nThe `autoscroll` higher-order-component supports the followig props\r\n\r\n|name|default|description|\r\n|-|-|-|\r\n|onScrolled|`undefined`|called without arguments whenever the list is scrolled|\r\n|onScrolledTop|`undefined`|called without arguments whenever the list is scrolled to the top|\r\n\r\n## options\r\n\r\nWhen creating a component by calling the `autoscroll` higher-order-component, an options object can be passed in as the second argument. It may contain the following keys:\r\n\r\n|name|default|description|\r\n|-|-|-|\r\n|isScrolledDownThreshold|150(px)|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. |\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthk2b%2Fautoscroll-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthk2b%2Fautoscroll-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthk2b%2Fautoscroll-react/lists"}