scroll-pilot v1.0.6

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

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