{"repo":"toviszsolt/react-scrollspy","free":true,"listed":false,"github":"https://github.com/toviszsolt/react-scrollspy","clone":"git clone https://github.com/toviszsolt/react-scrollspy.git","description":"ScrollSpy React Component - Automatically update navigation components based on scroll position to indicate which link is currently active in the viewport.","language":"JavaScript","stars":70,"topics":["react","react-component","onscroll","scrollspy-nav","reactjs","react-components","reactjs-components","reactjs-es6","react-navigation","reactjs-with-es6"],"license":"MIT","category":"ui-components","readme_excerpt":"ScrollSpy React Component React Component, that automatically update navigation components based on scroll position to indicate which link is currently active in the viewport. It also scrolls (navigation) to viewport when click on a navigation component. Demo with example code Sponsor me on GitHub Sponsor me on PayPal Table of Contents - How to install - How to use it - Step 1: Content - Step 2: Navigation - Configuration - Optional ScrollSpy props - onClickEach(event, internalClickHandler, container) - onChangeActiveId(currentId, prevId) - Compatibility - Example code - Guidelines - License How to install Install via NPM or Yarn package manager How to use it Step 1: Content Add a unique id to content blocks or heading tags for the elements you want to spy on. There is nothing more to do with the content elements. It's awfully simple so far, right? Step 2: Navigation Wrap your navigation structure with ScrollSpy component. Use only a tags whose href attribute is the hash link of the id of an existing content element. You can use structures of any complexity or depth in the ScrollSpy component, and you can nest multiple ScrollSpy components (although this works, it is not recommended). Don't worry, ScrollSpy won't add any additional structures to the child component. Note: If you are new to URL hashes, here is some information: https://en.wikipedia.org/wiki/URI fragment Don't forget to specify in the activeClass prop what className to add to the currently active link. Congratu","default_branch":null,"files":null,"tree":[],"storefront":"/r/toviszsolt","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/toviszsolt/react-scrollspy/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}