scroll-pilot

ScrollPilot : Scroll Nav & Indicator

ScrollPilot 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.

Features

• Scroll Indicator: A visual representation of the user's scrolling progress.
• Section Navigation: Easily navigate between different sections of a web page.
• Customization: Customize the component to match your website's design and requirements.
• Built on React.js and Material-UI: Utilizes the power of React.js and Material-UI for seamless integration into your web projects.

Demo

Live Demo [Stackblitz]

Installation

You can install the ScrollPilot library using npm:

npm i scroll-pilot

How to use ?

Simply import the ScrollPilot from ScrollPilot

import { ScrollPilot } from 'scroll-pilot';

function App() {
  return (
    <div>
      {/* Your content here */}
      <ScrollPilot />
      {/* More content */}
    </div>
  );
}

Configuration and Props

You can fully customize the ScrollPilot Component

// Sections list contains Label and Section ID
const sections = [
  {
    label: "Section 1",
    section: "#section1"
  },
  {
    label: "Section 2",
    section: "#section2"
  }
];

const config = {
  index: sections, // Pass your sections list here
  getScrollCompletionVal: (val) => {}, // Returns the value of scrolling progress (ranging between 1 - 100)
  onNavClicked: (val) => {}, // Callback function triggered when the user clicks on a navigation link from the popup
  aesthetics: {
    icon: <>Hi !</>, // Displays an icon at the center of the indicator
    tooltipTxt: "", // Shows text on hover over the indicator
    location: "bottom-right", // Sets the position of the indicator and navigation popup
    size: 50, // Sets the size of the indicator
    hideOnScroll: true, // Hides the indicator while the user is scrolling
    indicatorBackgroundColor: "#ffffff", // Sets the background color of the indicator
    indicatorProgressColor: "#181818", // Sets the progress color of the indicator
    margins: {
      // Applies margins from the sides (e.g., if the location is "bottom-right", it will apply 80px from the bottom and right side)
      desktop: 80,
      mobile: 40 // Customize margins for responsive design
    },
    popupWidths: {
      // Sets the width for the navigation popup
      desktop: "200px",
      mobile: "180px"
    },
    popupBackgroundColor: "#ffffff", // Sets the background color of the navigation popup
    popupLinksColor: "#181818" // Sets the color for navigation links inside the popup
  }
};

// Pass config as a prop to the component
function App() {
  return (
    <div>
      {/* Your content here */}
      <ScrollPilot config={config} />
    </div>
  );
}

You can add this line in the index.css file to enable smooth scrolling

html {
  scroll-behavior: smooth;
}

Configuration Details

Attribute	Type	Default Value	Description
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.
getScrollCompletionVal()	Function	()	Provides the value (%) of the user's scrolling progress, ranging between 1 - 100.
onNavClicked()	Function	()	Callback function triggered when the user clicks on a navigation link from the popup.
icon	HTML Content	<>Hi !</>	Displays provided HTML content (e.g., text, images, SVG, and icons) at the center of the indicator.
location	String	"bottom-right"	Applies position to indicator, you can specify any value between these 1] top-left 2] top-right 3] bottom-left 4] bottom-right
tooltipTxt	String	" "	Shows the given tooltip text on hover over the indicator.
size	Number	50	The size of the indicator. The position of nav popup is calculate with size + margin value
hideOnScroll	Boolean	True	Hides the indicator while the user is scrolling.
indicatorBackgroundColor	String	#FFFFFF	Changes the background color of the indicator.
indicatorProgressColor	String	#181818	Changes the circular progress color of the indicator.
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.
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.
popupBackgroundColor	String	#FFFFFF	Changes the background color of the navigation popup.
popupLinksColor	String	#181818	Changes the color of navigation links inside the popup.

How to run locally ?

If you wish to contribute in repositiory, setup the dev-environment in following way

1] Clone the project

git clone https://github.com/Prasad-Katkade/Scroll-Pilot

2] Install dependancies using NPM

npm install

3] Start Coding !

Note: 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.

Support

Open for remote work opportunity ! Connect with me here

• LinkedIn
• Twitter
• Portfolio