{"id":13341460,"url":"https://github.com/Prasad-Katkade/Scroll-Pilot","last_synced_at":"2025-03-11T21:31:04.870Z","repository":{"id":204911902,"uuid":"712877318","full_name":"Prasad-Katkade/Scroll-Pilot","owner":"Prasad-Katkade","description":"A simple React.js library that improves the accessibility of a web page. It includes a scroll indicator that tracks the user's scrolling progress and provides easy navigation options for moving between sections.","archived":false,"fork":false,"pushed_at":"2023-11-02T10:11:16.000Z","size":102,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-24T08:30:53.574Z","etag":null,"topics":["material-ui","npm-package","reactjs","ui-components","web-accessibility"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/react-crvshm?file=src%2FApp.js","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/Prasad-Katkade.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-01T11:42:47.000Z","updated_at":"2024-10-11T13:45:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"78792dc0-b314-46f9-af1a-660bf52ccf17","html_url":"https://github.com/Prasad-Katkade/Scroll-Pilot","commit_stats":null,"previous_names":["prasad-katkade/scroll-pilot"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasad-Katkade%2FScroll-Pilot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasad-Katkade%2FScroll-Pilot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasad-Katkade%2FScroll-Pilot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasad-Katkade%2FScroll-Pilot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Prasad-Katkade","download_url":"https://codeload.github.com/Prasad-Katkade/Scroll-Pilot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243115364,"owners_count":20238745,"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":["material-ui","npm-package","reactjs","ui-components","web-accessibility"],"created_at":"2024-07-29T19:25:26.330Z","updated_at":"2025-03-11T21:31:04.604Z","avatar_url":"https://github.com/Prasad-Katkade.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ScrollPilot : Scroll Nav \u0026 Indicator\n\nScrollPilot is a React.js library designed to enhance web page accessibility. It provides a scroll indicator that visualizes how much a user has scrolled and offers easy navigation options for moving between sections on a web page.\n\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)\n\n## Features\n\n- **Scroll Indicator:** A visual representation of the user's scrolling progress.\n- **Section Navigation:** Easily navigate between different sections of a web page.\n- **Customization:** Customize the component to match your website's design and requirements.\n- **Built on React.js and Material-UI:** Utilizes the power of React.js and Material-UI for seamless integration into your web projects.\n\n\u003cdiv style=\"display: flex; flex-direction: row;\"\u003e\n  \u003cimg src=\"https://github-production-user-asset-6210df.s3.amazonaws.com/41871409/279931611-7dd9f03c-8982-4509-9cc6-c3fa72db3e4f.gif\" width=\"200\" /\u003e\n\u003c/div\u003e\n\n## Demo \n\u003ca href=\"https://stackblitz.com/edit/react-crvshm?file=src%2FApp.js\" target=\"_blank\"\u003eLive Demo [Stackblitz] \u003c/a\u003e\n\n## Installation\n\nYou can install the ScrollPilot library using npm:\n\n```sh\nnpm i scroll-pilot\n```\n\n## How to use ?\n\nSimply import the **ScrollPilot** from **ScrollPilot**\n\n```jsx static\nimport { ScrollPilot } from 'scroll-pilot';\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      {/* Your content here */}\n      \u003cScrollPilot /\u003e\n      {/* More content */}\n    \u003c/div\u003e\n  );\n}\n```\n\n## Configuration and Props\n\nYou can fully customize the **ScrollPilot** Component\n\n```jsx static\n// Sections list contains Label and Section ID\nconst sections = [\n  {\n    label: \"Section 1\",\n    section: \"#section1\"\n  },\n  {\n    label: \"Section 2\",\n    section: \"#section2\"\n  }\n];\n\nconst config = {\n  index: sections, // Pass your sections list here\n  getScrollCompletionVal: (val) =\u003e {}, // Returns the value of scrolling progress (ranging between 1 - 100)\n  onNavClicked: (val) =\u003e {}, // Callback function triggered when the user clicks on a navigation link from the popup\n  aesthetics: {\n    icon: \u003c\u003eHi !\u003c/\u003e, // Displays an icon at the center of the indicator\n    tooltipTxt: \"\", // Shows text on hover over the indicator\n    location: \"bottom-right\", // Sets the position of the indicator and navigation popup\n    size: 50, // Sets the size of the indicator\n    hideOnScroll: true, // Hides the indicator while the user is scrolling\n    indicatorBackgroundColor: \"#ffffff\", // Sets the background color of the indicator\n    indicatorProgressColor: \"#181818\", // Sets the progress color of the indicator\n    margins: {\n      // Applies margins from the sides (e.g., if the location is \"bottom-right\", it will apply 80px from the bottom and right side)\n      desktop: 80,\n      mobile: 40 // Customize margins for responsive design\n    },\n    popupWidths: {\n      // Sets the width for the navigation popup\n      desktop: \"200px\",\n      mobile: \"180px\"\n    },\n    popupBackgroundColor: \"#ffffff\", // Sets the background color of the navigation popup\n    popupLinksColor: \"#181818\" // Sets the color for navigation links inside the popup\n  }\n};\n\n// Pass config as a prop to the component\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      {/* Your content here */}\n      \u003cScrollPilot config={config} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\nYou can add this line in the **index.css** file to **enable smooth scrolling**\n```css static\nhtml {\n  scroll-behavior: smooth;\n}\n```\n\n## Configuration Details\n\n| Attribute                 | Type                  | Default Value | Description                                                             |\n|---------------------------|-----------------------|---------------|-------------------------------------------------------------------------|\n| index                     | Array of objects     | []            | Builds an index based on your sections and displays it in a popup when clicked on the indicator. Links will navigate to sections based on given section IDs. |\n| getScrollCompletionVal()  | Function              | ()            | Provides the value (%) of the user's scrolling progress, ranging between 1 - 100. |\n| onNavClicked()            | Function              | ()            | Callback function triggered when the user clicks on a navigation link from the popup. |\n| icon                      | HTML Content          | \u003c\u003eHi !\u003c/\u003e     | Displays provided HTML content (e.g., text, images, SVG, and icons) at the center of the indicator. |\n| location                  | String                |\"bottom-right\" | Applies position to indicator, you can specify any value between these \u003cbr\u003e1] top-left \u003cbr\u003e2] top-right \u003cbr\u003e3] bottom-left \u003cbr\u003e4] bottom-right |\n| tooltipTxt                | String                | \" \"           | Shows the given tooltip text on hover over the indicator. |\n| size                      | Number       | 50            | The size of the indicator. The position of nav popup is  calculate with size + margin value |\n| hideOnScroll              | Boolean               | True          | Hides the indicator while the user is scrolling. |\n| indicatorBackgroundColor   | String                | #FFFFFF       | Changes the background color of the indicator. |\n| indicatorProgressColor    | String                | #181818       | Changes the circular progress color of the indicator. |\n| margins                   | Object {desktop, mobile} | {desktop: 80, mobile: 40} | Applies margins from the sides based on the given location (e.g., \"bottom-right\"). Desktop and mobile attributes are provided to maintain margin based on devices. |\n| popupWidths               | Object {desktop, mobile} | {desktop: \"200px\", mobile: \"180px\"} | Sets the width of the navigation popup. Desktop and mobile attributes are provided to maintain width based on devices. |\n| popupBackgroundColor       | String                | #FFFFFF       | Changes the background color of the navigation popup. |\n| popupLinksColor           | String                | #181818       | Changes the color of navigation links inside the popup. |\n\n## How to run locally ?\n\nIf you wish to contribute in repositiory, setup the dev-environment in following way\n\n1] Clone the project   \n```\ngit clone https://github.com/Prasad-Katkade/Scroll-Pilot\n```\n\n2] Install dependancies using NPM \n```\nnpm install\n```\n\n3] Start Coding !\n\n``\nNote: I plan to integrate Storybook for testing the component in the upcoming future. Until then, you can copy the component into a React project and test it accordingly.\n``\n\n## Support \nOpen for remote work opportunity ! Connect with me here \n- [LinkedIn](https://www.linkedin.com/in/prasad-katkade/)\n- [Twitter](https://twitter.com/_prasadd_)\n- [Portfolio](https://prasadd-portfolio.netlify.app/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPrasad-Katkade%2FScroll-Pilot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPrasad-Katkade%2FScroll-Pilot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPrasad-Katkade%2FScroll-Pilot/lists"}