React component for animating vertical scrolling\r\n\r\n## Table of Contents\r\n\r\n- [Introduction](#introduction)\r\n- [Features](#features)\r\n- [Install](#install)\r\n- [Run](#run)\r\n- [Examples](#examples)\r\n- [Example of Using react-scroll with image](#example-of-using-react-scroll-with-image-and-detailed-explanation)\r\n- [Usage](#usage)\r\n- [Props/Options](#Props/Options)\r\n- [Full example](#Full-example)\r\n- [Scroll Methods](#scroll-methods)\r\n- [Scroll Events](#scroll-events)\r\n- [Best Practices and Tips](#best-practices-and-tips)\r\n- [Troubleshooting and FAQs](#troubleshooting-and-faqs)\r\n- [Contribution](#contributions)\r\n- [Changelog](#changelog)\r\n\r\n### Introduction\r\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. \r\n\r\n### React-Scroll AI Bot\r\n\r\n[React-Scroll](https://codeparrot.ai/oracle?owner=fisshy&repo=react-scroll) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.\r\n\r\n### Features\r\n- Smooth Scrolling: Achieve seamless scrolling animations between sections of your web page.\r\n- Customization: Customize scroll behavior to suit your application's design and user experience requirements.\r\n- Accessibility: Ensure your scrolling functionality is accessible to all users, including those who rely on assistive technologies.\r\n- Lightweight: Keep your bundle size small with React Scroll's minimal footprint.\r\n\r\n### Install\r\n\r\n```js\r\n$ npm install react-scroll\r\n```\r\nor\r\n\r\n```\r\n$ yarn add react-scroll\r\n```\r\n\r\n### Run\r\n\r\n```js\r\n$ npm install\r\n$ npm test\r\n$ npm start\r\n```\r\n\r\nor\r\n\r\n```js\r\n$ yarn\r\n$ yarn test\r\n$ yarn start\r\n\r\n```\r\n\r\n### Examples\r\n\r\nCheckout examples\r\n\r\nLive example\r\n\r\n> [Basic](https://codesandbox.io/s/basic-6t84k)\r\n\r\n> [Basic-Keydown](https://codesandbox.io/s/l94kv62o4m)\r\n\r\n> [Container](https://codesandbox.io/s/3zznv27l5)\r\n\r\n> [With-hash](https://codesandbox.io/s/y0zzrk1v1j)\r\n\r\n> [With-overflow](https://codesandbox.io/s/l94kv62o4m)\r\n\r\n> [Code](https://github.com/fisshy/react-scroll/blob/master/examples/basic/app.js)\r\n\r\nCode example\r\n\r\n> [Next.js](https://github.com/fisshy/react-scroll/blob/master/examples/_next-js/page.tsx)\r\n\r\n\r\n### Example of Using react-scroll with image and detailed explanation!\r\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!\r\n\r\nCode:\r\n```js\r\nimport React from 'react';\r\nimport { Link, Element } from 'react-scroll';\r\n\r\nfunction App() {\r\n return (\r\n
This is the content of section 1
\r\nThis is the content of section 2
\r\n| \r\nactiveClass\r\n | \r\n\r\n class applied when element is reached\r\n | \r\n
| \r\nactiveStyle\r\n | \r\n\r\n style applied when element is reached\r\n | \r\n
| \r\nto\r\n | \r\n\r\n Target to scroll to\r\n | \r\n
| \r\ncontainerId\r\n | \r\n\r\n Container to listen for scroll events and to perform scrolling in\r\n | \r\n
| \r\nspy\r\n | \r\n\r\n Make Link selected when scroll is at its targets position\r\n | \r\n
| \r\nhashSpy\r\n | \r\n\r\nUpdate hash based on spy, containerId has to be set to scroll a specific element\r\n | \r\n
| \r\nsmooth\r\n | \r\n\r\nAnimate the scrolling\r\n | \r\n
| \r\noffset\r\n | \r\n\r\nScroll additional px ( like padding )\r\n | \r\n
| \r\nduration\r\n | \r\n\r\ntime of the scroll animation - can be a number or a function (`function (scrollDistanceInPx) { return duration; }`), that allows more granular control at run-time\r\n | \r\n
| \r\ndelay\r\n | \r\n\r\nWait x milliseconds before scroll | \r\n
| \r\nisDynamic \r\n | \r\n\r\nIn case the distance has to be recalculated - if you have content that expands etc. | \r\n
| \r\nonSetActive\r\n | \r\n\r\nInvoke whenever link is being set to active\r\n | \r\n
| \r\nonSetInactive\r\n | \r\n\r\nInvoke whenever link is lose the active status\r\n | \r\n
| \r\nignoreCancelEvents\r\n | \r\n\r\n Ignores events which cancel animated scrolling\r\n | \r\n
| \r\nhorizontal \r\n | \r\n\r\n Whether to scroll vertically (`false`) or horizontally (`true`) - default: `false`\r\n | \r\n
| \r\nspyThrottle \r\n | \r\n\r\nTime of the spy throttle - can be a number\r\n | \r\n