{"id":21588924,"url":"https://github.com/cantonjs/react-scroll-view","last_synced_at":"2025-04-10T21:52:08.478Z","repository":{"id":77652097,"uuid":"146873969","full_name":"cantonjs/react-scroll-view","owner":"cantonjs","description":"React scroll view component","archived":false,"fork":false,"pushed_at":"2018-10-30T09:33:05.000Z","size":251,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T21:51:55.871Z","etag":null,"topics":["intersection-observer","react","react-components","scroll","scrollview","sticky"],"latest_commit_sha":null,"homepage":null,"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/cantonjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-31T09:55:49.000Z","updated_at":"2023-07-30T09:05:21.000Z","dependencies_parsed_at":"2023-03-12T01:26:10.695Z","dependency_job_id":null,"html_url":"https://github.com/cantonjs/react-scroll-view","commit_stats":{"total_commits":95,"total_committers":1,"mean_commits":95.0,"dds":0.0,"last_synced_commit":"ea44cd381a52c61bea3d74518d1f2c233bae57f2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cantonjs%2Freact-scroll-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cantonjs%2Freact-scroll-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cantonjs%2Freact-scroll-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cantonjs%2Freact-scroll-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cantonjs","download_url":"https://codeload.github.com/cantonjs/react-scroll-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248305854,"owners_count":21081562,"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":["intersection-observer","react","react-components","scroll","scrollview","sticky"],"created_at":"2024-11-24T16:11:57.152Z","updated_at":"2025-04-10T21:52:08.454Z","avatar_url":"https://github.com/cantonjs.png","language":"JavaScript","readme":"\u003e This project is currently in beta and APIs are subject to change before v1.0 release.\n\n# react-scroll-view [WIP]\n\n[![CircleCI](https://circleci.com/gh/cantonjs/react-scroll-view.svg?style=shield)](https://circleci.com/gh/cantonjs/react-scroll-view)\n[![Build Status](https://travis-ci.org/cantonjs/react-scroll-view.svg?branch=master)](https://travis-ci.org/cantonjs/react-scroll-view)\n\nReact scroll component using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) in favor of scroll events.\n\n- [Features](#features)\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n- [References](#references)\n  - [ScrollView Component](#scrollview-component)\n  - [ScrollObserver Component](#scrollobserver-component)\n  - [StickySection Component](#stickysection-component)\n  - [RefreshControl Component](#refreshcontrol-component)\n- [License](#license)\n\n## Features\n\n- Support sticky for cross browsers (including Mobile Safari)\n- Support refresh control\n- Support `onEndReach()`, `onScrollStart()` and `onScrollEnd()` events\n- Easy to observe the intersections between ScrollView and children\n\n## Installation\n\n```bash\n$ yarn add @cantonjs/react-scroll-view intersection-observer\n```\n\n**[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is required. You should include the [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) yourself for cross-browser support**\n\n## Getting Started\n\n```js\nimport \"intersection-observer\";\nimport React, { Component } from \"react\";\nimport { ScrollView } from \"@cantonjs/react-scroll-view\";\n\nexport default class App extends Component {\n  handleEndReached = () =\u003e {\n    console.log(\"load more\");\n  };\n\n  render() {\n    return (\n      \u003cScrollView onEndReached={this.handleEndReached} style={{ height: '100vh' }}\u003e\n        \u003ch1\u003eReact Scroll View\u003c/h1\u003e\n        \u003cp\u003eAwseome!\u003c/p\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n```\n\n## References\n\n### ScrollView Component\n\n```jsx\nimport { ScrollView } from \"@cantonjs/react-scroll-view\";\n```\n\nScroll view component\n\n#### Props\n\n| Property                  | Description                                                                                                                       | Type     |\n| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------- |\n| style                     | These styles will be applied to the ScrollView container                                                                          | Object   |\n| className                 | The className will be applied to the ScrollView container                                                                         | string   |\n| contentContainerStyle     | These styles will be applied to the ScrollView content container which wraps all of the child views                               | Object   |\n| contentContainerClassName | The className will be applied to the ScrollView content container which wraps all of the child views                              | string   |\n| onScroll                  | Fires at most once per frame during scrolling                                                                                     | Function |\n| onScrollStart             | Called once when the scroll starts                                                                                                | Function |\n| onScrollEnd               | Called once when the scroll ends                                                                                                  | Function |\n| onEndReached              | Called once when the scroll position gets within `endReachedThreshold` of the rendered content                                    | Function |\n| endReachedThreshold       | How far from the end (in pixels) the bottom to trigger the `onEndReached` callback                                                | Number   |\n| isHorizontal              | When `true`, the ScrollView's children are arranged horizontally in a row instead of vertically in a column. Defaults to `false`  | Boolean  |\n| disabled                  | When `true`, the view cannot be scrolled. Defaults to `false`                                                                     | Boolean  |\n| refreshControl            | A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. Only works for vertical ScrollViews | Element  |\n| innerRef                  | Use this to access the dom (DIV) ref                                                                                              | Function |\n\nThe rest of the props are exactly the same as the original [DOM attributes](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes).\n\n#### Methods\n\n| Method        | Description                          |\n| ------------- | ------------------------------------ |\n| scrollTo(val) | Scrolls to a given value immediately |\n\n\n### ScrollObserver Component\n\n```jsx\nimport { ScrollObserver } from \"@cantonjs/react-scroll-view\";\n```\n\nWrap any child component and observe it when in ScrollView.\n\n#### Props\n\n| Property | Description                                                                               | Type     |\n| -------- | ----------------------------------------------------------------------------------------- | -------- |\n| onEnter  | Fires once when the children nodes enter                                                  | Function |\n| onLeave  | Fires once when the children nodes leave                                                  | Function |\n| innerRef | Use this to access the internal ref                                                       | Function |\n| children | Children must be a function. Will receive an object with `isIntersecting` and `ref` props | Function |\n\n#### Children function\n\nThe `children` prop will receive the following object shape:\n\n| Property       | Description                                                                             | Type     |\n| -------------- | --------------------------------------------------------------------------------------- | -------- |\n| ref            | Must be passed down to your component's ref in order to obtain a proper node to observe | Function |\n| isIntersecting | Will be `true` if the target element intersects with the ScrollView                     | Boolean  |\n\n#### Example\n\n```js\nimport \"intersection-observer\";\nimport React, { Component } from \"react\";\nimport { ScrollView, ScrollObserver } from \"@cantonjs/react-scroll-view\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      \u003cScrollView style={{ height: '100vh' }}\u003e\n        \u003ch1\u003eReact Scroll View\u003c/h1\u003e\n        \u003cp\u003eAwseome!\u003c/p\u003e\n        \u003cScrollObserver\u003e\n          {({ ref, isIntersecting }) =\u003e\n            \u003cimg\n              ref={ref}\n              src=\"/img.jpg\"\n              alt=\"lazy image\"\n              style={{ display: isIntersecting ? 'inline-block' : 'none' }}\n            /\u003e\n          }\n        \u003c/ScrollObserver\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n```\n\n### StickySection Component\n\n```jsx\nimport { StickySection } from \"@cantonjs/react-scroll-view\";\n```\n\nSection component with a sticky header.\n\n#### Props\n\n| Property | Description                | Type          |\n| -------- | -------------------------- | ------------- |\n| sticky   | Sticky header node element | Node/Function |\n\nThe rest of the props are exactly the same as the original [DOM attributes](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes).\n\n#### Example\n\n```js\nimport \"intersection-observer\";\nimport React, { Component } from \"react\";\nimport { ScrollView, ScrollSection } from \"@cantonjs/react-scroll-view\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      \u003cScrollView style={{ height: '100vh' }}\u003e\n        \u003cStickySection sticky={\u003ch1\u003eA\u003c/h1\u003e}\u003e\n          \u003cul\u003e\n            \u003cli\u003eAdelia Pisano\u003c/li\u003e\n            \u003cli\u003eAlayna Loredo\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/StickySection\u003e\n        \u003cStickySection sticky={\u003ch1\u003eB\u003c/h1\u003e}\u003e\n          \u003cul\u003e\n            \u003cli\u003eBrant Hunsberger\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/StickySection\u003e\n        \u003cStickySection sticky={\u003ch1\u003eC\u003c/h1\u003e}\u003e\n          \u003cul\u003e\n            \u003cli\u003eCarl Wetzler\u003c/li\u003e\n            \u003cli\u003eCherry Greeno\u003c/li\u003e\n            \u003cli\u003eCris Kepley\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/StickySection\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n```\n\n### RefreshControl Component\n\n```jsx\nimport { RefreshControl } from \"@cantonjs/react-scroll-view\";\n```\n\nRefreshControl component\n\n#### Props\n\n| Property     | Description                                             | Type     |\n| ------------ | ------------------------------------------------------- | -------- |\n| onRefresh    | Called when the view starts refreshing                  | Function |\n| isRefreshing | Whether the view should be indicating an active refresh | Boolean  |\n| color        | The refreshControl icon color                           | String   |\n\nThe rest of the props are exactly the same as the original [DOM attributes](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes).\n\n#### Methods\n\n| Method           | Description                   |\n| ---------------- | ----------------------------- |\n| requestRefresh() | Request to call `onRefresh()` |\n\n#### Example\n\n```js\nimport \"intersection-observer\";\nimport React, { Component } from \"react\";\nimport { ScrollView, RefreshControl } from \"@cantonjs/react-scroll-view\";\n\nexport default class App extends Component {\n  state = {\n    isRefreshing: false,\n  };\n  \n  handleRefresh = () =\u003e {\n    this.setState({\n      isRefreshing: true,\n    });\n  };\n\n  render() {\n    const { isRefreshing } = this.state;\n    return (\n      \u003cScrollView\n        style={{ height: '100vh' }}\n        refreshControl={\n          \u003cRefreshControl\n            onRefresh={this.handleRefresh}\n            isRefreshing={isRefreshing}\n          /\u003e\n        }\n      \u003e\n        \u003ch1\u003eReact Scroll View\u003c/h1\u003e\n        \u003cp\u003eAwseome!\u003c/p\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcantonjs%2Freact-scroll-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcantonjs%2Freact-scroll-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcantonjs%2Freact-scroll-view/lists"}