{"id":15396999,"url":"https://github.com/ryanhefner/react-scroll-trigger","last_synced_at":"2025-10-12T19:15:55.984Z","repository":{"id":41281043,"uuid":"96423014","full_name":"ryanhefner/react-scroll-trigger","owner":"ryanhefner","description":"📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.","archived":false,"fork":false,"pushed_at":"2023-03-14T00:46:21.000Z","size":2430,"stargazers_count":129,"open_issues_count":10,"forks_count":17,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-09T08:30:25.387Z","etag":null,"topics":["react","react-component","scroll","scroll-progress","scrolling","trigger","viewport"],"latest_commit_sha":null,"homepage":"https://www.pkgstats.com/pkg:react-scroll-trigger","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/ryanhefner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":"ryanhefner","patreon":"ryanhefner","open_collective":"ryanhefner","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-07-06T11:26:31.000Z","updated_at":"2025-06-21T18:55:20.000Z","dependencies_parsed_at":"2024-06-18T16:55:26.685Z","dependency_job_id":"e54df70b-1d1e-4880-91e2-f39ff100c11d","html_url":"https://github.com/ryanhefner/react-scroll-trigger","commit_stats":{"total_commits":199,"total_committers":9,"mean_commits":22.11111111111111,"dds":"0.39698492462311563","last_synced_commit":"ad1696ff5a1aaace92498125e56fbc65c491e920"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"purl":"pkg:github/ryanhefner/react-scroll-trigger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-scroll-trigger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-scroll-trigger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-scroll-trigger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-scroll-trigger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/react-scroll-trigger/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-scroll-trigger/sbom","scorecard":{"id":792014,"data":{"date":"2025-08-11","repo":{"name":"github.com/ryanhefner/react-scroll-trigger","commit":"ad1696ff5a1aaace92498125e56fbc65c491e920"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.3,"checks":[{"name":"Code-Review","score":4,"reason":"Found 9/21 approved changesets -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 18 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"22 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T07:49:19.639Z","repository_id":41281043,"created_at":"2025-08-23T07:49:19.639Z","updated_at":"2025-08-23T07:49:19.639Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007468,"owners_count":26084313,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","react-component","scroll","scroll-progress","scrolling","trigger","viewport"],"created_at":"2024-10-01T15:35:42.294Z","updated_at":"2025-10-12T19:15:55.952Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","readme":"# 📜 react-scroll-trigger\n\n[![npm](https://img.shields.io/npm/v/react-scroll-trigger?style=flat-square)](https://www.pkgstats.com/pkg:react-scroll-trigger)\n[![NPM](https://img.shields.io/npm/l/react-scroll-trigger?style=flat-square)](https://www.pkgstats.com/pkg:react-scroll-trigger)\n[![npm](https://img.shields.io/npm/dt/react-scroll-trigger?style=flat-square)](https://www.pkgstats.com/pkg:react-scroll-trigger)\n[![Coveralls github](https://img.shields.io/coveralls/github/ryanhefner/react-scroll-trigger?style=flat-square)](https://coveralls.io/github/ryanhefner/react-scroll-trigger)\n![CircleCI](https://img.shields.io/circleci/build/github/ryanhefner/react-scroll-trigger?style=flat-square)\n![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/ryanhefner/react-scroll-trigger?style=flat-square)\n\n\nReact component that monitors `scroll` events to trigger callbacks when it enters,\nexits and progresses through the viewport. All callback include the `progress` and\n`velocity` of the scrolling, in the event you want to manipulate stuff based on\nthose values.\n\n## Install\n\nVia [npm](https://npmjs.com/package/react-scroll-trigger)\n\n```sh\nnpm install react-scroll-trigger\n```\n\nVia [Yarn](http://yarn.fyi/react-scroll-trigger)\n\n```sh\nyarn add react-scroll-trigger\n```\n\n## How to use\n\n```js\nimport ScrollTrigger from 'react-scroll-trigger';\n\n...\n\n  onEnterViewport() {\n    this.setState({\n      visible: true,\n    });\n  }\n\n  onExitViewport() {\n    this.setState({\n      visible: false,\n    });\n  }\n\n  render() {\n    const {\n      visible,\n    } = this.state;\n\n    return (\n      \u003cScrollTrigger onEnter={this.onEnterViewport} onExit={this.onExitViewport}\u003e\n        \u003cdiv className={`container ${visible ? 'container-animate' : ''}`} /\u003e\n      \u003c/ScrollTrigger\u003e\n    );\n  }\n```\n\nThe `ScrollTrigger` is intended to be used as a composable element, allowing you\nto either use it standalone within a page (ie. no children).\n\n```js\n  \u003cScrollTrigger onEnter={this.onEnterViewport} onExit={this.onExitViewport} /\u003e\n```\n\nOr, pass in children to receive events and `progress` based on the dimensions of\nthose elements within the DOM.\n\n```js\n  \u003cScrollTrigger onEnter={this.onEnterViewport} onExit={this.onExitViewport}\u003e\n    \u003cList\u003e\n      [...list items...]\n    \u003c/List\u003e\n  \u003c/ScrollTrigger\u003e\n```\n\nThe beauty of this component is its flexibility. I’ve used it to trigger\nAJAX requests based on either the `onEnter` or `progress` of the component within\nthe viewport. Or, as a way to control animations or other transitions that you\nwould like to either trigger when visible in the viewport or based on the exact\n`progress` of that element as it transitions through the viewport.\n\n### Properties\n\nBelow are the properties that can be defined on a `\u003cScrollTrigger /\u003e` instance.\nIn addition to these properties, all other standard React properites like `className`,\n`key`, etc. can be passed in as well and will be applied to the `\u003cdiv\u003e` that will\nbe rendered by the `ScrollTrigger`.\n\n* `component:Element | String` - React component or HTMLElement to render as the wrapper for the `ScrollTrigger` (Default: `div`)\n* `containerRef:Object | String` - DOM element instance or string to use for query selecting DOM element. (Default: `document.documentElement`)\n* `throttleResize:Number` - Delay to throttle `resize` calls in milliseconds (Default: `100`)\n* `throttleScroll:Number` - Delay to throttle `scroll` calls in milliseconds (Default: `100`)\n* `triggerOnLoad:Boolean` - Whether or not to trigger the `onEnter` callback on mount (Default: `true`)\n* `onEnter:Function` - Called when the component enters the viewport `({progress, velocity}, ref) =\u003e {}`\n* `onExit:Function` - Called when the component exits the viewport `({progress, velocity}, ref) =\u003e {}`\n* `onProgress:Function` - Called while the component progresses through the viewport `({progress, velocity}, ref) =\u003e {}`\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","funding_links":["https://github.com/sponsors/ryanhefner","https://patreon.com/ryanhefner","https://opencollective.com/ryanhefner"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-scroll-trigger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Freact-scroll-trigger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-scroll-trigger/lists"}