{"id":28759780,"url":"https://github.com/maecapozzi/react-scroll-activator","last_synced_at":"2025-10-26T17:13:34.059Z","repository":{"id":57344214,"uuid":"125424386","full_name":"maecapozzi/react-scroll-activator","owner":"maecapozzi","description":"A React Component that watches for a scroll event and triggers behavior","archived":false,"fork":false,"pushed_at":"2022-12-06T23:50:28.000Z","size":2049,"stargazers_count":19,"open_issues_count":4,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-31T23:25:54.175Z","etag":null,"topics":["events","react","scrolls","stick","trigger","user-scrolls","watches"],"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/maecapozzi.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-03-15T20:47:25.000Z","updated_at":"2020-09-07T07:25:34.000Z","dependencies_parsed_at":"2023-01-24T12:30:51.758Z","dependency_job_id":null,"html_url":"https://github.com/maecapozzi/react-scroll-activator","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/maecapozzi%2Freact-scroll-activator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maecapozzi%2Freact-scroll-activator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maecapozzi%2Freact-scroll-activator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maecapozzi%2Freact-scroll-activator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maecapozzi","download_url":"https://codeload.github.com/maecapozzi/react-scroll-activator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maecapozzi%2Freact-scroll-activator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259261376,"owners_count":22830451,"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":["events","react","scrolls","stick","trigger","user-scrolls","watches"],"created_at":"2025-06-17T05:08:15.195Z","updated_at":"2025-10-26T17:13:29.018Z","avatar_url":"https://github.com/maecapozzi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-scroll-activator\n`react-scroll-activator` watches for a scroll event inside of a container or on the window. When certain user-defined rules are met, it passes an `activatedState` prop to a render prop component, triggering whatever behavior the developer chooses on the child.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![CircleCI](https://circleci.com/gh/maecapozzi/react-scroll-activator/tree/master.svg?style=svg)](https://circleci.com/gh/maecapozzi/react-scroll-activator/tree/master)\n\n### The Problem\nYou want an element to \"stick\" to the top of the window when a user scrolls in a page. Or maybe you want to hide an element as a user scrolls. Basically, you want to trigger the behavior of a component as a user scrolls. \n\n### The Solution\n`react-scroll-activator` is a straightforward React component that watches for a scroll event inside any container or on the window. If a user scrolls, (and a series of conditions are met), the `ScrollActivator` component sends an `activatedState` prop to a render prop component, triggering the render prop component's behavior. \n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n### Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [FAQ](#faq)\n- [Inspiration](#inspiration)\n- [Alternatives](#alternatives)\n- [Contributors](#contributors)\n- [License](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n  \n### Installation\n\n`npm install react-scroll-activator`\n### Usage\n\n• [Basic](https://jsfiddle.net/maecapozzi/2ys8nnz1/17/)\n\nYou can either use the `ScrollActivator` component on the window, or on any container that scrolls. \n\n#### On the window\n```jsx\nclass StickyElement extends React.Component {\n  shouldComponentBeSticky = () =\u003e {\n    return window.scrollY \u003e 120\n  }\n\n  isSticky = activatedState =\u003e {\n    if (activatedState === 'isActivated') {\n      return { position: 'fixed' }\n    } else {\n      return { position: 'relative' }\n    }\n  }\n\n  render () {\n    return (\n      \u003cScrollActivator onScroll={this.shouldComponentBeSticky}\u003e\n        {activatedState =\u003e (\n          \u003cdiv style={this.isSticky(activatedState)}\u003e\n            \u003ch1\u003eHi\u003c/h1\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/ScrollActivator\u003e\n    }\n  )\n}\n\n```\n\n### In a modal\n\nLet's say the modal's classname is `.any-class-name`:\n\n```jsx\nclass StickyElement extends React.Component {\n  handleScrollCallback = (e, topOffset) =\u003e {\n    this.containerSelector = document.querySelector('.any-class-name')\n    return (\n      e.target.scrollTop \u003e\n        this.containerSelector.getBoundingClientRect().top + topOffset\n    )\n  }\n\n  render () {\n    return (\n      \u003cdiv className='any-class-name'\u003e\n        \u003cScrollActivator\n          onScroll={this.handleScrollCallback}\n          containerSelector='.any-class-name'\n        \u003e\n          {activatedState =\u003e \u003cStickyElement isSticky={activatedState} /\u003e}\n        \u003c/ScrollActivator\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\n```\nIn this example, `ScrollActivator` is wrapped around a `StickyElement` which is the component that will stick to the top of the container as the user scrolls. The `ScrollActivator` will pass `activatedState` to the child component, which the child component can then use to activate certain behavior. In the case of this example, the `StickyElement` will stick to the top of the component. \n\nTo actually make sure you are setting rules, add a `handleScrollCallback` function that resembles the one below to the class in which you are invoking `ScrollActivator`. You'll pass this to the `ScrollActivator` component `onScroll`. \n\n### FAQ\n### Inspiration\nI built this because I needed to make a banner stick to the top of a container, but I didn't have access to the window. \n### Alternatives\n* [react-sticky](https://github.com/captivationsoftware/react-sticky)\n* [react-stickynode](https://github.com/yahoo/react-stickynode)\n### Contributors\n* Mae Capozzi\n### License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaecapozzi%2Freact-scroll-activator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaecapozzi%2Freact-scroll-activator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaecapozzi%2Freact-scroll-activator/lists"}