react-sections-scroller

A simple & Fast & lightweight React library works on .js and .ts files, build with TypeScript for creating a smooth scrolling experience to sections on the same webpage from a navigation bar. (keep it simple)

Installation

$yarn add react-sections-scroller

or

$npm install react-sections-scroller

Importing

import { Section, SectionLink } from 'react-sections-scroller';

Basic usage

import { Section, SectionLink } from 'react-sections-scroller';

// The SectionLink component redirect to the Section
  <SectionLink to="about" className="">
    About
  </SectionLink>
  
// The Section component defines a scrollable section
  <Section id="about" className="">
    <h2>This is About section</h2>
  </Section>
  
 // that's why both props are required... "to" and "id"
 // className is optional but recommended! 

🛑🔥 Styling SectionLink auto generate:

so link will change into color:🟥red by default without any style in your project, can be changed using

1. activeColor

2. inactiveColor

    <SectionLink to="section1" activeColor='active' inactiveColor='inactive'>Section 1</SectionLink>

then in your style.css create:

    .active{
        color:blue;
    }
    // also optional
    .inactive{
        color:black;
    }

🛑🔥 TailWind Styling also available SectionLink can be change easly using activeColor, inactiveColor

    <SectionLink to="section1" activeColor='text-black' inactiveColor='text-white'>Section 1</SectionLink>

Best Practice

Full Example of only 2 steps

1- create Navbar component add this code

⚠ Hint: feel free to use component js, jsx, ts,tsx

import React from 'react';
import { SectionLink } from 'react-sections-scroller';
// The SectionLink component redirect to the Section
export default function Nav() {

  return (
    <nav>
    <SectionLink to="aboutSection">About</SectionLink>
    <SectionLink to="contactSection">Contact</SectionLink>
    <SectionLink to="servicesSection">Services</SectionLink>
  </nav>
  )
}

2- create AboutSection component add this code

⚠ Hint: About component suppose to be a section in the same page, it's not routing to any other page

import React from 'react'
import { Section } from 'react-sections-scroller'
/ The Section component defines a scrollable section
export default function AboutSection() {
  return (
    <div>
      <Section id="aboutSection" className="">
        <h2>I'm about section</h2>
      </Section>
      </div>
  )
}

sample of app component:

import React from "react";
import AboutSection from "./AboutSection";
import "./App.css";
import Nav from "./Nav";

function App() {
  return (
    <div>
      <Nav />
      <AboutSection />
    </div>
  );
}
export default App;

About

react-sections-scroller is a lightweight and easy-to-use React library designed to enhance user experience by enabling smooth scrolling functionality between sections on a webpage. It provides a seamless integration with navigation bars, allowing users to effortlessly navigate to different sections on the page.

With react-sections-scroller, you can easily implement a smooth scroll behavior without the need for complex configuration. Simply include the library in your project and start creating a more interactive and engaging user experience.

This library is suitable for a wide range of web applications, including personal websites, portfolios, blogs, and more. It offers a straightforward solution for adding a polished touch to your website's navigation and enhancing overall usability.

Features

✅ Smooth scrolling behavior

✅ Seamless integration with navigation bars

✅ Lightweight and easy to implement

✅ Enhances user experience and navigation

✅ Suitable for various web applications

Usage

To use react-sections-scroller in your React application, simply import the necessary components (only 2 for now) and configure the desired settings to enable smooth scrolling between sections. Here is a basic example to get you started:

For more detailed usage instructions and example configurations, please refer to the documentation.

Contribution We welcome contributions from the community to help improve and enhance react-sections-scroller.

Let's make smooth scrolling even better together!

Thank you for considering react-sections-scroller for your project. We hope it brings a smooth and enjoyable scrolling experience to your users. If you have any questions or need further assistance, please don't hesitate to reach out.

Happy scrolling! 🚀🌟

License 🔖

MIT.