{"id":13403681,"url":"https://github.com/fisshy/react-scroll","last_synced_at":"2025-05-13T17:04:04.628Z","repository":{"id":27941641,"uuid":"31434220","full_name":"fisshy/react-scroll","owner":"fisshy","description":"React scroll component","archived":false,"fork":false,"pushed_at":"2025-02-19T14:35:35.000Z","size":1180,"stargazers_count":4396,"open_issues_count":231,"forks_count":439,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-05-06T16:11:16.419Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/fisshy/react-scroll/blob/master/README.md","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/fisshy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2015-02-27T18:56:28.000Z","updated_at":"2025-05-02T03:45:15.000Z","dependencies_parsed_at":"2023-02-19T15:31:42.097Z","dependency_job_id":"2fdf52d3-390b-41f5-8ffb-44a5ed9207af","html_url":"https://github.com/fisshy/react-scroll","commit_stats":{"total_commits":409,"total_committers":116,"mean_commits":"3.5258620689655173","dds":0.5354523227383863,"last_synced_commit":"1be2a94576b3f569a9a448c2658ac50ab5d4850e"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fisshy%2Freact-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fisshy%2Freact-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fisshy%2Freact-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fisshy%2Freact-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fisshy","download_url":"https://codeload.github.com/fisshy/react-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253009892,"owners_count":21839714,"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-07-30T19:01:33.235Z","updated_at":"2025-05-13T17:04:04.598Z","avatar_url":"https://github.com/fisshy.png","language":"JavaScript","readme":"\u003ch1 align='center'\u003e React Scroll\u003c/h1\u003e\n\n\u003cp align='center'\u003eReact component for animating vertical scrolling\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Features](#features)\n- [Install](#install)\n- [Run](#run)\n- [Examples](#examples)\n- [Example of Using react-scroll with image](#example-of-using-react-scroll-with-image-and-detailed-explanation)\n- [Usage](#usage)\n- [Props/Options](#Props/Options)\n- [Full example](#Full-example)\n- [Scroll Methods](#scroll-methods)\n- [Scroll Events](#scroll-events)\n- [Best Practices and Tips](#best-practices-and-tips)\n- [Troubleshooting and FAQs](#troubleshooting-and-faqs)\n- [Contribution](#contributions)\n- [Changelog](#changelog)\n\n### Introduction\nReact-Scroll is a lightweight library for enhancing scrolling functionality in React applications. Whether you're building a single-page application, a portfolio site, or a complex web application, React Scroll provides you with an easy-to-use solution for implementing smooth scrolling behavior. This works with the latest versions of Google Chrome, Microsodt Edge, and Firefox. \n\n### React-Scroll AI Bot\n\n[React-Scroll](https://codeparrot.ai/oracle?owner=fisshy\u0026repo=react-scroll) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.\n\n### Features\n- Smooth Scrolling: Achieve seamless scrolling animations between sections of your web page.\n- Customization: Customize scroll behavior to suit your application's design and user experience requirements.\n- Accessibility: Ensure your scrolling functionality is accessible to all users, including those who rely on assistive technologies.\n- Lightweight: Keep your bundle size small with React Scroll's minimal footprint.\n\n### Install\n\n```js\n$ npm install react-scroll\n```\nor\n\n```\n$ yarn add react-scroll\n```\n\n### Run\n\n```js\n$ npm install\n$ npm test\n$ npm start\n```\n\nor\n\n```js\n$ yarn\n$ yarn test\n$ yarn start\n\n```\n\n### Examples\n\nCheckout examples\n\nLive example\n\n\u003e [Basic](https://codesandbox.io/s/basic-6t84k)\n\n\u003e [Basic-Keydown](https://codesandbox.io/s/l94kv62o4m)\n\n\u003e [Container](https://codesandbox.io/s/3zznv27l5)\n\n\u003e [With-hash](https://codesandbox.io/s/y0zzrk1v1j)\n\n\u003e [With-overflow](https://codesandbox.io/s/l94kv62o4m)\n\n\u003e [Code](https://github.com/fisshy/react-scroll/blob/master/examples/basic/app.js)\n\nCode example\n\n\u003e [Next.js](https://github.com/fisshy/react-scroll/blob/master/examples/_next-js/page.tsx)\n\n\n### Example of Using react-scroll with image and detailed explanation!\nIn this example, the react-scroll library was utilized to enable smooth scrolling navigation within a single-page React application. The library provides components such as Link and Element that facilitate seamless navigation between different sections of the page. Once you start your react app, you can add this code at the bottom to experience the scroll feature!\n\nCode:\n```js\nimport React from 'react';\nimport { Link, Element } from 'react-scroll';\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cnav\u003e\n        \u003cul\u003e\n          \u003cli\u003e\n            \u003cLink to=\"section1\" smooth={true} duration={500}\u003eSection 1\u003c/Link\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003cLink to=\"section2\" smooth={true} duration={500}\u003eSection 2\u003c/Link\u003e\n          \u003c/li\u003e\n          {/* Add more navigation links as needed */}\n        \u003c/ul\u003e\n      \u003c/nav\u003e\n      \u003cElement name=\"section1\"\u003e\n        \u003csection style={{ height: '100vh', backgroundColor: 'lightblue' }}\u003e\n          \u003ch1\u003eSection 1\u003c/h1\u003e\n          \u003cp\u003eThis is the content of section 1\u003c/p\u003e\n        \u003c/section\u003e\n      \u003c/Element\u003e\n      \u003cElement name=\"section2\"\u003e\n        \u003csection style={{ height: '100vh', backgroundColor: 'lightgreen' }}\u003e\n          \u003ch1\u003eSection 2\u003c/h1\u003e\n          \u003cp\u003eThis is the content of section 2\u003c/p\u003e\n        \u003c/section\u003e\n      \u003c/Element\u003e\n      {/* Add more sections with Element components as needed */}\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n![GIF_example](Animation_esep.gif)\n\n### Usage\n\n```js\nimport React, { useEffect } from 'react';\nimport { Link, Button, Element, Events, animateScroll as scroll, scrollSpy } from 'react-scroll';\n\nconst Section = () =\u003e {\n\n  // useEffect is used to perform side effects in functional components.\n  // Here, it's used to register scroll events and update scrollSpy when the component mounts.\n  useEffect(() =\u003e {\n    \n    // Registering the 'begin' event and logging it to the console when triggered.\n    Events.scrollEvent.register('begin', (to, element) =\u003e {\n      console.log('begin', to, element);\n    });\n\n    // Registering the 'end' event and logging it to the console when triggered.\n    Events.scrollEvent.register('end', (to, element) =\u003e {\n      console.log('end', to, element);\n    });\n\n    // Updating scrollSpy when the component mounts.\n    scrollSpy.update();\n\n    // Returning a cleanup function to remove the registered events when the component unmounts.\n    return () =\u003e {\n      Events.scrollEvent.remove('begin');\n      Events.scrollEvent.remove('end');\n    };\n  }, []);\n\n  // Defining functions to perform different types of scrolling.\n  const scrollToTop = () =\u003e {\n    scroll.scrollToTop();\n  };\n\n  const scrollToBottom = () =\u003e {\n    scroll.scrollToBottom();\n  };\n\n  const scrollTo = () =\u003e {\n    scroll.scrollTo(100); // Scrolling to 100px from the top of the page.\n  };\n\n  const scrollMore = () =\u003e {\n    scroll.scrollMore(100); // Scrolling an additional 100px from the current scroll position.\n  };\n\n  // Function to handle the activation of a link.\n  const handleSetActive = (to) =\u003e {\n    console.log(to);\n  };\n\n  // Rendering the component's JSX.\n  return (\n  \u003cdiv\u003e\n    {/* Link component to scroll to \"test1\" element with specified properties */}\n    \u003cLink \n      activeClass=\"active\" \n      to=\"test1\" \n      spy={true} \n      smooth={true} \n      offset={50} \n      duration={500} \n      onSetActive={handleSetActive}\n    \u003e\n      Test 1\n    \u003c/Link\u003e\n\n    {/* Other Link and Button components for navigation, each with their unique properties and targets */}\n    {/* ... */}\n\n    {/* Element components that act as scroll targets */}\n    \u003cElement name=\"test1\" className=\"element\"\u003e\n      test 1\n    \u003c/Element\u003e\n    \u003cElement name=\"test2\" className=\"element\"\u003e\n      test 2\n    \u003c/Element\u003e\n    \u003cdiv id=\"anchor\" className=\"element\"\u003e\n      test 6 (anchor)\n    \u003c/div\u003e\n\n    {/* Links to elements inside a specific container */}\n    \u003cLink to=\"firstInsideContainer\" containerId=\"containerElement\"\u003e\n      Go to first element inside container\n    \u003c/Link\u003e\n    \u003cLink to=\"secondInsideContainer\" containerId=\"containerElement\"\u003e\n      Go to second element inside container\n    \u003c/Link\u003e\n\n    {/* Container with elements inside */}\n    \u003cdiv className=\"element\" id=\"containerElement\"\u003e\n      \u003cElement name=\"firstInsideContainer\"\u003e\n        first element inside container\n      \u003c/Element\u003e\n      \u003cElement name=\"secondInsideContainer\"\u003e\n        second element inside container\n      \u003c/Element\u003e\n    \u003c/div\u003e\n\n    {/* Anchors to trigger scroll actions */}\n    \u003ca onClick={scrollToTop}\u003eTo the top!\u003c/a\u003e\n    \u003cbr/\u003e\n    \u003ca onClick={scrollToBottom}\u003eTo the bottom!\u003c/a\u003e\n    \u003cbr/\u003e\n    \u003ca onClick={scrollTo}\u003eScroll to 100px from the top\u003c/a\u003e\n    \u003cbr/\u003e\n    \u003ca onClick={scrollMore}\u003eScroll 100px more from the current position!\u003c/a\u003e\n  \u003c/div\u003e\n);\n\n};\n\nexport default Section;\n\n\n```\n\n### Props/Options\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nactiveClass\n\u003c/td\u003e\n\u003ctd\u003e\n class applied when element is reached\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nactiveStyle\n\u003c/td\u003e\n\u003ctd\u003e\n style applied when element is reached\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nto\n\u003c/td\u003e\n\u003ctd\u003e\n Target to scroll to\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n\u003ctd\u003e\ncontainerId\n\u003c/td\u003e\n\u003ctd\u003e\n Container to listen for scroll events and to perform scrolling in\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nspy\n\u003c/td\u003e\n\u003ctd\u003e\n Make Link selected when scroll is at its targets position\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nhashSpy\n\u003c/td\u003e\n\u003ctd\u003e\nUpdate hash based on spy, containerId has to be set to scroll a specific element\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nsmooth\n\u003c/td\u003e\n\u003ctd\u003e\nAnimate the scrolling\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\noffset\n\u003c/td\u003e\n\u003ctd\u003e\nScroll additional px ( like padding )\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nduration\n\u003c/td\u003e\n\u003ctd\u003e\ntime of the scroll animation - can be a number or a function (`function (scrollDistanceInPx) { return duration; }`), that allows more granular control at run-time\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\ndelay\n\u003c/td\u003e\n\u003ctd\u003e\nWait x milliseconds before scroll\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nisDynamic \n\u003c/td\u003e\n\u003ctd\u003e\nIn case the distance has to be recalculated - if you have content that expands etc.\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nonSetActive\n\u003c/td\u003e\n\u003ctd\u003e\nInvoke whenever link is being set to active\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nonSetInactive\n\u003c/td\u003e\n\u003ctd\u003e\nInvoke whenever link is lose the active status\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nignoreCancelEvents\n\u003c/td\u003e\n\u003ctd\u003e\n Ignores events which cancel animated scrolling\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nhorizontal \n\u003c/td\u003e\n\u003ctd\u003e\n Whether to scroll vertically (`false`) or horizontally (`true`) - default: `false`\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\nspyThrottle \n\u003c/td\u003e\n\u003ctd\u003e\nTime of the spy throttle - can be a number\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n### Full example\n\n```js\n\u003cLink activeClass=\"active\"\n      to=\"target\"\n      spy={true}\n      smooth={true}\n      hashSpy={true}\n      offset={50}\n      duration={500}\n      delay={1000}\n      isDynamic={true}\n      onSetActive={this.handleSetActive}\n      onSetInactive={this.handleSetInactive}\n      ignoreCancelEvents={false}\n      spyThrottle={500}\n\u003e\n  Your name\n\u003c/Link\u003e\n```\n\n### Scroll Methods\n\n\u003e Scroll To Top\n\n```js\nimport { animateScroll } from 'react-scroll';\n\nconst options = {\n  // your options here, for example:\n  duration: 500,\n  smooth: true,\n};\n\nanimateScroll.scrollToTop(options);\n\n```\n\n\u003e Scroll To Bottom\n\n```js\nimport { animateScroll } from 'react-scroll';\n\nconst options = {\n  // Your options here, for example:\n  duration: 500,\n  smooth: true,\n};\n\nanimateScroll.scrollToBottom(options);\n\n```\n\n\u003e Scroll To (position)\n\n```js\nimport { animateScroll } from 'react-scroll';\n\nconst options = {\n  // Your options here, for example:\n  duration: 500,\n  smooth: true,\n};\n\n// Scroll to 100 pixels from the top of the page\nanimateScroll.scrollTo(100, options);\n\n\n```\n\n\u003e Scroll To (Element)\n\nanimateScroll.scrollTo(positionInPixels, props = {});\n\n```js\nimport { Element, scroller } from 'react-scroll';\n\n\u003cElement name=\"myScrollToElement\"\u003e\u003c/Element\u003e\n\n// Somewhere else, even another file\nscroller.scrollTo('myScrollToElement', {\n  duration: 1500,\n  delay: 100,\n  smooth: true,\n  containerId: 'ContainerElementID',\n  offset: 50, // Scrolls to element + 50 pixels down the page\n  // ... other options\n});\n\n```\n\n\u003e Scroll More (px)\n\n```js\nimport { animateScroll } from 'react-scroll';\n\nconst options = {\n  // Your options here, for example:\n  duration: 500,\n  smooth: true,\n};\n\n// Scroll an additional 10 pixels down from the current scroll position\nanimateScroll.scrollMore(10, options);\n\n```\n\n### Scroll events\n\n\u003e begin - start of the scrolling\n\n```js\nimport { Events } from 'react-scroll';\n\nEvents.scrollEvent.register('begin', function(to, element) {\n  console.log('begin', to, element);\n});\n\n```\n\n\u003e end - end of the scrolling/animation\n\n```js\n\nimport { Events } from 'react-scroll';\n\nEvents.scrollEvent.register('end', function(to, element) {\n  console.log('end', to, element);\n});\n\n```\n\n\u003e Remove events\n\n```js\nimport { Events } from 'react-scroll';\n\nEvents.scrollEvent.remove('begin');\nEvents.scrollEvent.remove('end');\n\n```\n\n#### Create your own Link/Element\n\u003e Simply just pass your component to one of the high order components (Element/Scroll)\n\n```js\nimport React from 'react';\nimport { ScrollElement, ScrollLink } from 'react-scroll';\n\nconst Element = (props) =\u003e {\n  return (\n    \u003cdiv {...props} ref={(el) =\u003e { props.parentBindings.domNode = el; }}\u003e\n      {props.children}\n    \u003c/div\u003e\n  );\n};\n\nexport const ScrollableElement = ScrollElement(Element);\n\nconst Link = (props) =\u003e {\n  return (\n    \u003ca {...props}\u003e\n      {props.children}\n    \u003c/a\u003e\n  );\n};\n\nexport const ScrollableLink = ScrollLink(Link);\n\n```\n\n### Scroll Animations\n\u003e Add a custom easing animation to the smooth option. This prop will accept a Boolean if you want the default, or any of the animations listed below\n\n```js\nimport { scroller } from 'react-scroll';\n\nscroller.scrollTo('myScrollToElement', {\n  duration: 1500,\n  delay: 100,\n  smooth: 'easeInOutQuint',\n  containerId: 'ContainerElementID',\n  // ... other options\n});\n\n```\n\n\n\u003e List of currently available animations:\n\n```\nlinear\n\t- no easing, no acceleration.\neaseInQuad\n\t- accelerating from zero velocity.\neaseOutQuad\n\t- decelerating to zero velocity.\neaseInOutQuad\n\t- acceleration until halfway, then deceleration.\neaseInCubic\n\t- accelerating from zero velocity.\neaseOutCubic\n\t- decelerating to zero velocity.\neaseInOutCubic\n\t- acceleration until halfway, then deceleration.\neaseInQuart\n\t- accelerating from zero velocity.\neaseOutQuart\n\t- decelerating to zero velocity.\neaseInOutQuart\n\t-  acceleration until halfway, then deceleration.\neaseInQuint\n\t- accelerating from zero velocity.\neaseOutQuint\n\t- decelerating to zero velocity.\neaseInOutQuint\n\t- acceleration until halfway, then deceleration.\n```\n\nA good visual reference can be found at [easings.net](http://easings.net/)\n\n### Best Practices and Tips\n- Optimize performance by limiting the number of elements with scroll events.\n- Test your application on various devices and screen sizes to ensure accessibility.\n\n### Troubleshooting and FAQs\n- Q: How do I customize the scroll behavior?\n- A: You can customize the scroll duration, easing function, and other parameters using the duration, smooth, and offset props.\n\n- Q: Why is my smooth scrolling not working? This can be applied to any prop!\n- A: Ensure that the smooth prop is set to true and that your browser supports smooth scrolling.\n\n### Contributions\n- To contribute to React-Scroll, please follow these guidelines:\n\n- Fork the repository and create a new branch for your changes.\n- Make your changes and submit a pull request with a clear description of your work.\n- Include tests and ensure all existing tests pass before submitting your changes.\n\n### Changelog\n- [See the CHANGELOG](./CHANGELOG.md)\n\n### License\n- React Scroll is licensed under the MIT License. Explore this to understand terms and conditions of the license- https://opensource.org/licenses/MIT\n\n\n","funding_links":[],"categories":["JavaScript","UI Components","Uncategorized","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","Table of Contents","UI utilities"],"sub_categories":["UI Navigation","Uncategorized","Navigation","Scroll Animation Libraries","Miscellaneous"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffisshy%2Freact-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffisshy%2Freact-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffisshy%2Freact-scroll/lists"}