{"id":22021780,"url":"https://github.com/foo-software/react-scroll-context","last_synced_at":"2026-05-05T02:31:40.045Z","repository":{"id":98590583,"uuid":"181330930","full_name":"foo-software/react-scroll-context","owner":"foo-software","description":"A React scroll context provider and consumer for detecting scroll position (scrollX, scrollY) and providing that data to child components.","archived":false,"fork":false,"pushed_at":"2024-03-09T09:15:21.000Z","size":41,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-28T16:46:07.402Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foo-software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-04-14T15:40:19.000Z","updated_at":"2020-01-11T18:18:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"2ac2cb56-fcd8-47c7-8c85-d93b8d452849","html_url":"https://github.com/foo-software/react-scroll-context","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-scroll-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-scroll-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-scroll-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-scroll-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foo-software","download_url":"https://codeload.github.com/foo-software/react-scroll-context/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245085374,"owners_count":20558379,"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-11-30T06:14:56.236Z","updated_at":"2026-05-05T02:31:40.000Z","avatar_url":"https://github.com/foo-software.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `@foo-software/react-scroll-context`\n\n\u003e **React Scroll Context** exports a [React context](https://reactjs.org/docs/context.html) provider and consumer. It provides `window` scroll data to a consumer.\n\n## Install\n\n\u003e npm\n\n```\nnpm install @foo-software/react-scroll-context\n```\n\n\u003e yarn\n\n```\nyarn add @foo-software/react-scroll-context\n```\n\n## Dependencies\n\n- `react@16.8`\n\n## Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003ePropType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eContext\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eA \u003ccode\u003eContext\u003c/code\u003e object created by \u003ccode\u003eReact.createContext()\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eobject\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e--\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003echildren\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eAnything that can be rendered, but typically a tree of elements. Scroll data can be consumed from anywhere in this tree.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enode\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e--\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003escrollContainer\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eA scroll container. This will be \u003ccode\u003ewindow\u003c/code\u003e by default, but you could use an element instead with this option.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eoneOf[PropTypes.object, PropTypes.node]\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003ewindow\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ethrottleTime\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eTime in milleseconds to throttle calculations of scroll.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e200\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Exposed Context Consumer Data\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003escrollX\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThe current value of \u003ccode\u003ewindow.scrollX\u003c/code\u003e.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003escrollY\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThe current value of \u003ccode\u003ewindow.scrollY\u003c/code\u003e.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eisScrollingDown\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eIdentifies whether or not scroll direction is down.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Usage\n\n\u003e Standard\n\n```jsx\nimport React from 'react';\nimport { ScrollProvider } from '@foo-software/react-scroll-context';\n\n// replace `scroll-context` any name you like.\nconst Context = React.createContext('scroll-context');\n\nconst ScrollDisplay = () =\u003e (\n  \u003cScrollProvider\n    Context={Context}\n  \u003e\n    \u003cdiv\u003e\n      \u003ch1\u003eScroll it!\u003c/h1\u003e\n      \u003cContext.Consumer\u003e\n        {({ scrollX, scrollY, isScrollingDown }) =\u003e (\n          \u003cpre\u003e\n            scrollX: {scrollX}\n            scrollY: {scrollY}\n            isScrollingDown: {isScrollingDown ? 'yes' : 'no'}\n          \u003c/pre\u003e\n        )}\n      \u003c/Context.Consumer\u003e\n    \u003c/div\u003e\n  \u003c/ScrollProvider\u003e\n);\n```\n\n\u003e Class\n\n```jsx\nimport React, { Component } from 'react';\nimport { ScrollProvider } from '@foo-software/react-scroll-context';\n\n// replace `scroll-context` any name you like.\nconst Context = React.createContext('scroll-context');\n\nclass ScrollDisplay extends Component {\n  static contextType = Context;\n\n  render() {\n    const { scrollX, scrollY, isScrollingDown } = this.context;\n    return (\n      \u003cpre\u003e\n        scrollX: {scrollX}\n        scrollY: {scrollY}\n        isScrollingDown: {isScrollingDown ? 'yes' : 'no'}\n      \u003c/pre\u003e\n    );\n  }\n}\n\nconst App = () =\u003e (\n  \u003cScrollProvider\n    Context={Context}\n  \u003e\n    \u003cdiv\u003e\n      \u003ch1\u003eScroll it!\u003c/h1\u003e\n      \u003cScrollDisplay /\u003e\n    \u003c/div\u003e\n  \u003c/ScrollProvider\u003e\n);\n```\n\n\u003e [`useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) hook\n\n```jsx\nimport React, { useContext } from 'react';\nimport { ScrollProvider } from '@foo-software/react-scroll-context';\n\n// replace `scroll-context` any name you like.\nconst Context = React.createContext('scroll-context');\n\nconst ScrollDisplay = () =\u003e {\n  const { scrollX, scrollY, isScrollingDown } = useContext(Context);\n  return (\n    \u003cpre\u003e\n      scrollX: {scrollX}\n      scrollY: {scrollY}\n      isScrollingDown: {isScrollingDown ? 'yes' : 'no'}\n    \u003c/pre\u003e\n  );\n};\n\nconst App = () =\u003e (\n  \u003cScrollProvider\n    Context={Context}\n  \u003e\n    \u003cdiv\u003e\n      \u003ch1\u003eScroll it!\u003c/h1\u003e\n      \u003cScrollDisplay /\u003e\n    \u003c/div\u003e\n  \u003c/ScrollProvider\u003e\n);\n```\n\n## Credits\n\n\u003e \u003cimg src=\"https://s3.amazonaws.com/foo.software/images/logo-200x200.png\" width=\"100\" height=\"100\" align=\"left\" /\u003e This package was brought to you by [Foo - a website performance monitoring tool](https://www.foo.software). Create a **free account** with standard performance testing. Automatic website performance testing, uptime checks, charts showing performance metrics by day, month, and year. Foo also provides real time notifications when performance and uptime notifications when changes are detected. Users can integrate email, Slack and PagerDuty notifications.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo-software%2Freact-scroll-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoo-software%2Freact-scroll-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo-software%2Freact-scroll-context/lists"}